Dialog
현재 흐름 위에서 집중이 필요한 짧은 작업을 엽니다.
- 성숙도
- 후보
- 소스 경로
components/ui/dialog.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/reactradix-ui
실제 미리보기
사용할 때
사용 기준
설정이나 짧은 폼을 현재 맥락 안에서 처리할 때 씁니다.
사용하지 않을 때
긴 문서나 되돌리기 어려운 결정에는 쓰지 않습니다.
변형과 상태
closed고정 예시트리거가 열릴 작업을 구체적으로 설명하는지 확인합니다.
open직접 조작제목, 본문, 동작과 닫기 경계가 분명한지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
body-scroll직접 조작긴 본문만 스크롤되고 제목과 동작은 접근 가능한지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
접근성
제목과 설명, 초점 가두기, Escape 닫기와 트리거 초점 복귀를 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
size | "small" | "medium" | "large" | "full" | 아니요 | 작업에 맞는 대화상자 너비입니다. |
scroll | "content" | "body" | 아니요 | 전체 또는 DialogBody의 스크롤 경계입니다. |
closeLabel | string | 아니요 | 호환용 닫기 아이콘을 추가합니다. 새 작업은 DialogClose를 조합합니다. |
사용 예시
지원 importimport {
Dialog,
DialogTrigger,
DialogContent,
DialogBody,
DialogFooter,
DialogClose,
} from "@/components/ui/dialog"
<Dialog>
<DialogTrigger>Settings</DialogTrigger>
<DialogContent size="medium" scroll="body">
<DialogBody>...</DialogBody>
<DialogFooter>
<DialogClose>Done</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>