Installation
bash
npx axis-cli add dialogUsage
tsx
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@ax/ui'
export function Example() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>
Dialog description goes here.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
)
}With Form
tsx
<Dialog>
<DialogTrigger asChild>
<Button>Edit Profile</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here.
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="name" className="text-right">Name</Label>
<Input id="name" className="col-span-3" />
</div>
</div>
<div className="flex justify-end">
<Button type="submit">Save changes</Button>
</div>
</DialogContent>
</Dialog>Components
Dialog다이얼로그 루트 컨테이너
DialogTrigger다이얼로그를 여는 트리거
DialogContent다이얼로그 콘텐츠 영역
DialogHeader다이얼로그 헤더
DialogTitle다이얼로그 제목
DialogDescription다이얼로그 설명
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | 다이얼로그 열림 상태 (controlled) |
onOpenChange | (open: boolean) => void | - | 열림 상태 변경 콜백 |
modal | boolean | true | 모달 모드 여부 |