사이드/하단 슬라이드 패널. Dialog 기반 compound 패턴으로 접근성을 보장합니다.
| 키 | 동작 |
|---|---|
| Esc | 드로어 닫기 |
| Tab | 드로어 내부 포커스 이동 |
모달 다이얼로그. 9-part anatomy: Root, Disclosure, Panel, Heading, Description, Dismiss, Header, Body, Footer.
DialogDisclosure를 사용하면 open/setOpen 상태 관리 없이 다이얼로그를 열고 닫을 수 있습니다.
DialogHeading은 자동으로 aria-labelledby를, DialogDescription은 aria-describedby를 다이얼로그에 연결합니다. 수동 ID 관리가 필요 없습니다.
다이얼로그를 닫는 여러 방법을 확인할 수 있습니다. ESC, 배경 클릭, 또는 Button의 onClick으로 setOpen(false)을 호출합니다.
Header, Body, Footer는 모두 선택적입니다. 필요한 부분만 사용할 수 있습니다.
본문은 body 역할의 semantic token을 사용합니다.
레이블 텍스트보조 설명 텍스트npm install @reopt-ai/opt-ui