대화상자
확인·선택이 필요한 짧은 일을 화면 가운데에서 물어요. 로그인처럼 화면 하나를 통째로 쓸 수도 있어요.
플랫폼
폰 브라우저·홈 화면 앱(767px 이하)고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 확인·경고처럼 답을 받아야 하는 창.
사용 예제#
할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.
해부도#
- 1
딤
뒤 화면을 40%로 덮어요. size="full"에는 없어요.
- 2
카드
가운데 카드예요. sm 360px · md 448px.
- 3
제목
h2 - 대화상자의 이름이 돼요.
- 4
설명
한두 줄. aria-describedby가 가리켜요.
- 5
버튼 줄
오른쪽 정렬, 주 동작이 맨 오른쪽이에요.
속성#
인터페이스#
타입에서 자동으로 뽑은 표예요.
Dialog#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| open | - | boolean | 열렸는지예요. 기본 true라 부모가 조건부로 그려도 돼요. false가 되면 나가는 움직임 뒤 사라져요 |
| onClose* | - | () => void | 닫아야 할 때 불러요. |
| label | - | string | 제목이 없을 때의 이름(aria-label)이에요. 제목이 있으면 그 제목이 이름이 돼요 |
| layer | - | 'stickyName' | 'panelSticky' | 'chrome' | 'stickyHeadName' | 'rail' | 'stickyHead' | 'do… | 쌓임 층 이름이에요(파운데이션 레이아웃 › 쌓임 층) |
| initialFocus | - | RefObject<HTMLElement | null> | 열릴 때 처음 초점을 줄 요소예요. 없으면 첫 초점 가능 요소예요 |
| closeOnBack주의 | - | boolean | 'narrow' | 브라우저·폰 뒤로 가기로 닫아요. 'narrow'는 1023px 이하(아래 시트·전체 화면)에서만. 주소는 바뀌지 않아요 |
| UNSAFE_disableFocusLock주의 | - | boolean | 포커스 트랩·처음 초점·복원을 꺼요. 키보드 사용자가 밖으로 새니 직접 대신할 때만 써요 |
| UNSAFE_ignoreDimmerClick주의 | - | boolean | 딤을 눌러도 닫지 않아요. 잃으면 안 되는 입력이 있을 때만 써요 |
| UNSAFE_ignoreEsc주의 | - | boolean | Esc로 닫지 않아요. 닫기 버튼을 꼭 둘 때만 써요 |
| UNSAFE_disableScrollLock주의 | - | boolean | 뒤 페이지 스크롤을 잠그지 않아요. 뒤 화면을 함께 움직여야 할 때만 써요 |
| title | - | ReactNode | 제목(h2)이에요. 대화상자의 이름이 돼요 |
| description | - | ReactNode | 제목 아래 설명 한두 줄이에요 |
| actions | - | ReactNode | 아래 버튼 줄이에요. 주 동작은 맨 오른쪽에 둬요 |
| size | - | 'sm' | 'md' | 'full' | sm 360 · md 448px 카드, full은 화면 전체예요(면과 여백을 직접 그려요) |
| dim | - | number | 딤 불투명도(%)예요. full에는 딤이 없어요 |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| children | - | ReactNode | 안에 그릴 내용이에요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
스펙#
상태 · 슬롯마다 실제로 그려지는 값이에요.
Dialog#
size≠full=true
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | panel | 폭 | 100% |
| 모서리 | 16px | ||
| 배경색 | bg | ||
| 안쪽 여백 | 20px |
size≠full=true, size≠md=true
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | panel | 최대 폭 | 360px |
exiting=true
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | panel | 시간 | 150ms |
| 이징 | ease-in |
entering=true
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | panel | 이징 | ease-out |
title || description=true
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | content | 바깥 위 여백 | 16px |
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | actions | 바깥 위 여백 | 20px |
| 간격 | 8px |
값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.
접근성#
가이드라인#
언제 쓰나요#
- 되돌릴 수 없는 동작 앞에서 한 번 확인할 때.
- 로그인처럼 하던 일을 잠시 멈추고 화면 하나를 써야 할 때(size="full").
이렇게 써요#
문구#
- 제목은 묻는 말로 적어요("계획을 지울까요?").
- 버튼은 일어날 일을 동사로 적어요("지우기").
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |