ダイアログDialogBeta
背後を無効化したオーバーレイのウィンドウです。
プレビュー
状態とバリエーション
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| open | boolean | - | 開閉状態を外部で制御します。 |
| onOpenChange | (open: boolean) => void | - | 開閉状態が変わった時に呼び出されます。 |
| showCloseButton | boolean | true | 右上の閉じるボタンを表示するかを制御します。 |
| portalContainer | HTMLElement | null | - | プレビュー枠や疑似ブラウザ内に閉じ込めたい場合のポータル先です。 |
| DialogBody | React.HTMLAttributes<HTMLDivElement> | - | 長いフォーム用のスクロール領域。DialogContent の直下に置くと Content が高さ制限つき flex 列になり、ヘッダー/フッター固定・中央スクロールになります。(#293) |
使い方
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
Input,
Label,
Textarea,
} from "@gunjo/ui";
export function EditProfileDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">プロフィールを編集</Button>
</DialogTrigger>
<DialogContent
className="sm:max-w-[440px]"
onOpenAutoFocus={(event) => event.preventDefault()}
>
<DialogHeader>
<DialogTitle>プロフィールを編集</DialogTitle>
<DialogDescription>
表示名とハンドル名を更新します。保存するまで変更は反映されません。
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-2">
<div className="grid gap-2 sm:grid-cols-[96px_minmax(0,1fr)] sm:items-center">
<Label htmlFor="display-name" className="sm:text-right">表示名</Label>
<Input id="display-name" className="w-full" defaultValue="青井 はな" />
</div>
<div className="grid gap-2 sm:grid-cols-[96px_minmax(0,1fr)] sm:items-center">
<Label htmlFor="handle" className="sm:text-right">ハンドル</Label>
<Input id="handle" className="w-full" defaultValue="@aoi" />
</div>
<div className="grid gap-2 sm:grid-cols-[96px_minmax(0,1fr)]">
<Label htmlFor="bio" className="pt-2 sm:text-right">メモ</Label>
<Textarea id="bio" className="w-full" defaultValue="デザインシステムを管理しています。" />
</div>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">キャンセル</Button>
</DialogClose>
<Button>保存</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。