ドロワーDrawerBeta
画面の端から補助的な内容を開き、設定や詳細をその場で確認できるドロワーです。
プレビュー
状態とバリエーション
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| open | boolean | - | 開閉状態を外部で制御します。 |
| onOpenChange | (open: boolean) => void | - | 開閉状態が変わった時に呼び出されます。 |
| side | "bottom" | "right" | "left" | "top" | "bottom" | DrawerContent の表示方向です。 |
| shouldScaleBackground | boolean | true | 開いた時に背面を縮小するかを制御します。 |
| container | HTMLElement | null | - | Drawer のポータルや背面処理を閉じ込めるコンテナです。 |
| portalContainer | HTMLElement | null | - | DrawerContent を描画するポータル先です。docs や埋め込みプレビュー内に閉じ込める時に使います。 |
| overlayClassName | string | - | DrawerOverlay に追加するクラス名です。 |
使い方
import * as React from "react";
import {
Button,
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
Input,
Label,
Textarea,
} from "@gunjo/ui";
export function DeliverySettingsDrawer() {
const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);
return (
<div ref={setPortalContainer} className="relative min-h-[420px] overflow-hidden rounded-md">
<Drawer shouldScaleBackground={false} container={portalContainer}>
<DrawerTrigger asChild>
<Button variant="outline">詳細を開く</Button>
</DrawerTrigger>
<DrawerContent portalContainer={portalContainer}>
<DrawerHeader>
<DrawerTitle>配信設定</DrawerTitle>
<DrawerDescription>
画面を離れずに補助的な設定を確認・変更します。
</DrawerDescription>
</DrawerHeader>
<div className="grid gap-3 px-4 pb-4">
<Label htmlFor="title">タイトル</Label>
<Input id="title" className="w-full" defaultValue="週次レポート" />
<Label htmlFor="note">補足</Label>
<Textarea id="note" className="w-full" defaultValue="公開前にレビューが必要です。" />
</div>
<DrawerFooter>
<DrawerClose asChild>
<Button variant="outline">キャンセル</Button>
</DrawerClose>
<Button>保存</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
</div>
);
}