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

Features

Side Placement

4方向(left, right, top, bottom)からスライドインできます。デフォルトはrightです。

Close Button

showCloseButtonで閉じるボタンの表示/非表示を制御できます。closeIconでアイコン差し替えも可能です。

API

Component Structure

Drawer— Radix Dialog
.Trigger.ContentProps.Header.Title.Description.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)

showCloseButtontrue
boolean

内蔵の閉じるボタンを表示

closeIconBuilt-in SVG icon
ReactNode

カスタム閉じるアイコン

DrawerClose

asChildfalse
boolean

子要素をトリガーとして使用