コンポーネント
Dialog
プライマリウィンドウまたは他のダイアログウィンドウの上に重ねて表示され、下層のコンテンツを不活性にするウィンドウです。
import {Button,Dialog,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle,DialogTrigger,} from "@murasakijs/ui";export function DialogDemo() {return ( <Dialog> <DialogTrigger asChild> <Button variant="outline">Edit Profile</Button> </DialogTrigger> <DialogContent className="sm:max-w-[425px]"> <DialogHeader> <DialogTitle>Edit profile</DialogTitle> <DialogDescription> Make changes to your profile here. Click save when you're done. </DialogDescription> </DialogHeader> <p className="text-sm text-muted-foreground"> Profile form fields would go here. </p> <DialogFooter> <DialogClose asChild> <Button type="button">Save changes</Button> </DialogClose> </DialogFooter> </DialogContent> </Dialog>);}使い方
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@murasakijs/ui";<Dialog>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
<DialogDescription>Description</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>API リファレンス
サブコンポーネント
| コンポーネント | 説明 |
|---|---|
Dialog | ルートプリミティブ。open・defaultOpen・onOpenChange・modal を受け取ります。 |
DialogTrigger | ダイアログを開く要素です。asChild でカスタムトリガー(Button など)をレンダリングできます。 |
DialogPortal | 子要素を document.body にポータルします。DialogContent が内部的に使用します。 |
DialogOverlay | 背景を暗くするオーバーレイです。DialogContent が自動的にレンダリングします。 |
DialogContent | ダイアログ本体です。組み込みの閉じるボタン(X)をレンダリングします。 |
DialogHeader | DialogTitle / DialogDescription を縦に並べます。 |
DialogFooter | アクションを並べる行で、大きい画面では右寄せになります。 |
DialogTitle | ダイアログのアクセシブルな名前です。 |
DialogDescription | ダイアログのアクセシブルな説明です。 |
DialogClose | ダイアログを閉じるボタンです。asChild に対応しています。 |
すべてのサブコンポーネントは Radix UI の Dialog
プリミティブをラップし、それ以外の props はすべてそのまま渡されます。