Drawer
Drawerは、画面の端からスライドインするパネルコンポーネントです。 ナビゲーション、設定、詳細情報、フォームなどのサブコンテンツを表示するのに適しています。
4
Sides
5
Sizes
Built-in
Scroll
Radix
Base
Playground
Preview
MDRight
Drawer
Side
Size
Content
Options
Button Style
Cancel
Save
const [open, setOpen] = useState(false)
<Drawer open={open} onOpenChange={setOpen}>
<DrawerTrigger asChild>
<Button variant="outline">Open Drawer</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Drawer Title</DrawerTitle>
<DrawerDescription>This is a description of the drawer.</DrawerDescription>
</DrawerHeader>
<DrawerBody>
<p>This is a drawer panel. You can place any content here, including navigation, forms, or detail views.</p>
</DrawerBody>
<DrawerFooter>
<DrawerClose asChild>
<Button variant="ghost" size="md" pressEffect={false}>Cancel</Button>
</DrawerClose>
<Button size="md" pressEffect={false}>Save</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>Sizes
smサイドパネル・設定Left/Right: width320px
Top/Bottom: height320px
md (default)標準(デフォルト)Left/Right: width400px
Top/Bottom: height400px
lg複雑なフォームLeft/Right: width480px
Top/Bottom: height480px
xl詳細コンテンツLeft/Right: width640px
Top/Bottom: height640px
fullフルサイズLeft/Right: width100%
Top/Bottom: height100%
パディング(全サイズ共通)
Header24px (下 0)
Body24px
Footer24px (上 0)
Closeright 16px, top 16px
| Size | Left/Right | Top/Bottom | 用途 |
|---|---|---|---|
sm | width: 320px | height: 320px | サイドパネル・設定 |
md | width: 400px | height: 400px | 標準(デフォルト) |
lg | width: 480px | height: 480px | 複雑なフォーム |
xl | width: 640px | height: 640px | 詳細コンテンツ |
full | width: 100% | height: 100% | フルサイズ |
パディング — 全サイズ共通
Header
p-6 pb-0
24px, bottom 0
Body
p-6
24px
Footer
p-6 pt-0
24px, top 0
Close
right-4 top-4
16px
Features
Side Placement
4方向(left, right, top, bottom)からスライドインできます。デフォルトはrightです。
API
Component Structure
Drawer— Radix Dialog.Trigger.ContentProps.Header.Title.Description.Body.Footer.CloseProps.Overlay.Portal
.Triggerトリガー要素.ContentPropsパネル(side・size・close).Headerヘッダー領域.Titleタイトル(aria-labelledby).Description補足テキスト(aria-describedby).Bodyコンテンツ領域(スクロール対応).Footerアクション領域.CloseProps閉じるボタン.Overlay背景オーバーレイ.PortalポータルProps
DrawerContent
side"right""left" | "right" | "top" | "bottom"スライド方向
size"md""sm" | "md" | "lg" | "xl" | "full"パネルサイズ(左右は幅、上下は高さ: 320/400/480/640/full)
showCloseButtontrueboolean内蔵の閉じるボタンを表示
closeIconBuilt-in SVG iconReactNodeカスタム閉じるアイコン
| Name | Type | Default | Description |
|---|---|---|---|
side | "left" | "right" | "top" | "bottom" | "right" | スライド方向 |
size | "sm" | "md" | "lg" | "xl" | "full" | "md" | パネルサイズ(左右は幅、上下は高さ: 320/400/480/640/full) |
showCloseButton | boolean | true | 内蔵の閉じるボタンを表示 |
closeIcon | ReactNode | Built-in SVG icon | カスタム閉じるアイコン |
DrawerClose
asChildfalseboolean子要素をトリガーとして使用
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | 子要素をトリガーとして使用 |