AIFT Design
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: 버튼

On this page