Components
Dialog
다이얼로그 컴포넌트
Dialog
다이얼로그 컴포넌트는 모달 형태의 대화 상자를 표시합니다.
기본 사용법
import { DialogRoot, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogButton,} from '@aift/ui/Dialog';export default function Preview() { return ( <div className="max-w-md"> <DialogRoot> <DialogTrigger>열기</DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>제목</DialogTitle> <DialogDescription>설명</DialogDescription> </DialogHeader> <DialogFooter> <DialogButton text="확인" /> </DialogFooter> </DialogContent> </DialogRoot> </div> );}Props
Dialog 컴포넌트는 Radix UI의 Dialog를 기반으로 하며, 여러 하위 컴포넌트로 구성됩니다.
Dialog.Root: 루트 컴포넌트Dialog.Trigger: 다이얼로그를 여는 트리거Dialog.Content: 다이얼로그 콘텐츠Dialog.Header: 헤더 영역Dialog.Title: 제목Dialog.Description: 설명Dialog.Footer: 푸터 영역Dialog.Button: 버튼