Dialog

모달 대화상자 컴포넌트입니다.

개요

Dialog는 사용자의 주의를 집중시키는 모달 대화상자 컴포넌트입니다.

설치


npx @vortex/cli add dialog --package foundation

기본 사용법


import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@vortex/ui-foundation";
 
export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>대화상자 열기</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>제목</DialogTitle>
        </DialogHeader>
        <p>내용</p>
      </DialogContent>
    </Dialog>
  );
}

Props API

Prop	Type	Default	Description
open	boolean	false	열림 상태
onOpenChange	(open) => void	-	상태 변경 핸들러

예제


export default function ConfirmDialog() {
  const [open, setOpen] = useState(false);
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="destructive">삭제</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>삭제 확인</DialogTitle>
        </DialogHeader>
        <p>정말 삭제하시겠습니까?</p>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            취소
          </Button>
          <Button variant="destructive">삭제</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}