Dialog
다섯 가지 배치를 지원하는 focus-trap 대화상자 표면이에요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
Popup의 placement | middle, top, bottom, start, end | middle |
Root의 modal | true이면 초점을 가두고 스크롤을 잠가요 | true |
| 상태 | 제어형 open 또는 비제어형 defaultOpen | 닫힘 |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/dialog.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRDialog } from '@tinyrack/ui/components/dialog';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
배치 고유 링크
같은 compound 구조를 사용하고 popup 배치만 변경하세요.
분리된 trigger handle 고유 링크
안정적인 handle이 공통 조상을 공유하지 않는 trigger와 root를 이어 주고, Viewport가 모바일에서 대화 상자를 화면 안에 담아요.
폼이 있는 긴 모달 작업 고유 링크
모달은 열린 동안 포커스를 가두고 긴 콘텐츠를 뷰포트 안에 유지하며 실제 폼을 제출해요. 닫힌 뒤 대화 상자 열기로 포커스를 복원해요.
API
Base UI는 포커스 트랩, 스크롤 잠금, 포털, 배경 상호작용, 포커스 복원, Escape 닫기를 담당해요. Popup은 모든 배치에서 하나의 반응형 너비 규칙을 사용해요. 긴 작업 콘텐츠는 Description과 작업 행 사이의 tr-dialog-body 컨테이너에 배치하세요. 그러면 팝업의 minmax(0, 1fr) 본문만 스크롤되고 제목과 작업은 계속 표시돼요.
| 공개 API | 용도 |
|---|---|
TRDialog.Root / TRDialogRoot | 제어형 open, 비제어형 defaultOpen, 모달 동작, 닫기, 선택적 handle payload 상태를 관리해요. |
TRDialog.Trigger / TRDialogTrigger | root를 열거나 handle과 선택적 payload를 사용해 분리된 root를 열어요. |
TRDialog.Portal / TRDialogPortal | 레이어를 document.body 또는 사용자 지정 container로 이동해요. |
TRDialog.Backdrop / TRDialogBackdrop | 모달 배경과 외부 누르기 대상을 제공해요. |
TRDialog.Viewport / TRDialogViewport | 긴 콘텐츠와 모바일 dialog 레이아웃을 포함해요. |
TRDialog.Popup / TRDialogPopup | 이름이 지정된 dialog를 렌더링하고 initialFocus, finalFocus, Tinyrack placement를 받아요. |
TRDialog.Title / TRDialogTitle | 접근 가능한 이름을 제공해요. |
TRDialog.Description / TRDialogDescription | 접근 가능한 설명을 제공해요. |
TRDialog.Close / TRDialogClose | 활성 dialog를 닫고 포커스를 복원해요. |
TRDialog.createHandle, createDialogHandle, TRDialogHandle<Payload> | 분리된 trigger, 명령형 열기/닫기 호출, 타입이 지정된 payload를 연결해요. |
외부 상호작용을 유지하려면 modal={false}를 사용하고 스크롤 잠금 없이 포커스만 가두려면 modal="trap-focus"를 사용하세요. disablePointerDismissal은 외부 누르기로 dialog가 닫히지 않게 해요. 모든 part는 ref, render, 이벤트 핸들러, class, style, 네이티브 속성을 보존해요. 닫힌 portal은 SSR에 안전하며 기본으로 열린 portal도 공개 구조 변경 없이 hydrate돼요.