コンポーネント
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 に対応しています。 |
モーダル内のフォーカス制御、Escape キー、ラベル付け、フォーカス復帰は React Aria Components が提供します。