Drawer

Drawerは、画面の端から表示されるパネルのコンポーネントです。

<Drawer.Root>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

使い方

import { Drawer } from "@yamada-ui/react"

import { Drawer } from "@/components/ui"

import { Drawer } from "@workspaces/ui"

<Drawer.Root>
  <Drawer.OpenTrigger />
  <Drawer.Content>
    <Drawer.Overlay />
    <Drawer.CloseButton />
    <Drawer.Header />
    <Drawer.Body />
    <Drawer.Footer />
    <Drawer.CloseTrigger />
  </Drawer.Content>
</Drawer.Root>

Drawer.OverlayとDrawer.CloseButtonは、省略することができます。

サイズを変更する

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl", "full"]}>
    {(size) => (
      <Drawer.Root key={size} size={size}>
        <Drawer.OpenTrigger>
          <Button>Open "{size}" Drawer</Button>
        </Drawer.OpenTrigger>

        <Drawer.Content>
          <Drawer.Header>ドラゴンボール</Drawer.Header>

          <Drawer.Body>
            『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
          </Drawer.Body>

          <Drawer.Footer>
            <Drawer.CloseTrigger>
              <Button variant="ghost">とじる</Button>
            </Drawer.CloseTrigger>
            <Button>Wikipedia</Button>
          </Drawer.Footer>
        </Drawer.Content>
      </Drawer.Root>
    )}
  </For>
</Wrap>

位置を変更する

表示位置を変更する場合は、placementに"block-start"や"inline-start"などを設定します。デフォルトでは、"inline-end"が設定されています。

<Wrap gap="md">
  <For each={["block-start", "inline-start", "inline-end", "block-end"]}>
    {(placement) => (
      <Drawer.Root key={placement} placement={placement}>
        <Drawer.OpenTrigger>
          <Button>Open "{placement}" Drawer</Button>
        </Drawer.OpenTrigger>

        <Drawer.Content>
          <Drawer.Header>ドラゴンボール</Drawer.Header>

          <Drawer.Body>
            『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
          </Drawer.Body>

          <Drawer.Footer>
            <Drawer.CloseTrigger>
              <Button variant="ghost">とじる</Button>
            </Drawer.CloseTrigger>
            <Button>Wikipedia</Button>
          </Drawer.Footer>
        </Drawer.Content>
      </Drawer.Root>
    )}
  </For>
</Wrap>

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

<Drawer.Root duration={0.7}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

マウント時にスクロールをブロックしない

デフォルトでは、パネルを開いた際に主要なコンテンツのスクロールをブロックしています。これは、アクセシビリティを確保するためです。もし、主要なコンテンツのスクロールをブロックしたくない場合は、blockScrollOnMountをfalseに設定します。

<Drawer.Root blockScrollOnMount={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

閉じるボタンを無効にする

閉じるボタンを無効にする場合は、withCloseButtonをfalseに設定します。

<Drawer.Root withCloseButton={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

オーバーレイを無効にする

パネルのオーバーレイを無効(非表示)にする場合は、withOverlayをfalseにします。

<Drawer.Root withOverlay={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

ドラッグして閉じる

Drawerをドラッグで閉じたい場合は、closeOnDragをtrueに設定します。

<Drawer.Root closeOnDrag>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

ドラッグバーを非表示にする

ドラッグバーを非表示にする場合は、withDragBarをfalseに設定します。

<Drawer.Root closeOnDrag withDragBar={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

閉じるボタンをカスタマイズする

<Drawer.Root>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.CloseButton colorScheme="red" />

    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

オーバーレイをカスタマイズする

<Drawer.Root>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Overlay bg="blackAlpha.300" backdropFilter="blur(10px)" />

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

制御する

表示・非表示を制御する場合は、openとonCloseを設定します。

const { open, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Drawer</Button>

    <Drawer.Root open={open} onClose={onClose}>
      <Drawer.Content>
        <Drawer.Header>ドラゴンボール</Drawer.Header>

        <Drawer.Body>
          『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
        </Drawer.Body>

        <Drawer.Footer>
          <Button variant="ghost" onClick={onClose}>
            とじる
          </Button>
          <Button>Wikipedia</Button>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer.Root>
  </>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Drawer.Root

Prop	デフォルト	型 / 説明
`size`	`"lg"`	`"2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "full" \| "lg" \| "md" \| "sm" \| "xl" ...` The size of the component.
`allowPinchZoom`	`false.`	`boolean` Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
`blockScrollOnMount`	`true`	`boolean` If `true`, scrolling will be disabled on the `body` when the drawer opens.
`body`	-	`DrawerBodyProps \| ReactNode` The drawer body to use.
`cancel`	-	`ButtonProps \| ReactNode` The drawer cancel button to use.
`closeOnDrag`	`false`	`boolean` If `true`, then the drawer will close on drag.
`closeOnEsc`	`true`	`boolean` If `true`, the modal will close when the `Esc` key is pressed.
`closeOnOverlay`	`true`	`boolean` If `true`, the modal will close when the overlay is clicked.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`dragConstraints`	`0`	`number` Applies constraints on the permitted draggable area.
`dragElastic`	`0.1`	`number` The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.
`dragOffset`	`80`	`number` Offset from being dragged to closing.
`dragVelocity`	`100`	`number` Velocity of the drag that triggers close.
`duration`	-	`MotionTransitionProps["duration"]` The animation duration.
`finalFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to return focus to when `FocusLock` unmounts.
`footer`	-	`DrawerFooterProps \| ReactNode` The drawer footer to use.
`header`	-	`DrawerHeaderProps \| ReactNode` The drawer header to use.
`initialFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to receive focus initially.
`lockFocusAcrossFrames`	`false`	`boolean` Enables aggressive focus capturing within iframes. - If `true`: keep focus in the lock, no matter where lock is active. - If `false`: allows focus to move outside of iframe.
`middle`	-	`ButtonProps \| ReactNode` The drawer middle button to use.
`onCancel`	-	`(onClose: () => void) => void` The callback invoked when cancel button clicked.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onCloseComplete`	-	`() => void` Callback function to run side effects after the drawer has closed.
`onEsc`	-	`() => void` Callback invoked when the escape key is pressed and focus is within modal.
`onMiddle`	-	`(onClose: () => void) => void` The callback invoked when middle button clicked.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`onSuccess`	-	`(onClose: () => void) => void` The callback invoked when success button clicked.
`open`	-	`boolean` If `true`, the element will be opened.
`placement`	`"inline-end"`	`"block-end" \| "block-start" \| "inline-end" \| "inline-start" ...` The placement of the drawer.
`portalProps`	-	`Omit<PortalProps, "children">` Props to be forwarded to the portal component.
`restoreFocus`	`false`	`boolean` If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.
`success`	-	`ButtonProps \| ReactNode` The drawer success button to use.
`title`	-	`DrawerTitleProps \| ReactNode` The drawer title to use.
`trigger`	-	`ReactNode` The modal trigger to use.
`withCloseButton`	`true`	`boolean` If `true`, display the drawer close button.
`withDragBar`	`true`	`boolean` If `true`, display the drag bar when `closeOnDrag` is `true`.
`withOverlay`	`true`	`boolean` If `true`, display the drawer overlay.

Drawer.CloseButton

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"ghost" \| "outline" \| "solid" \| "subtle" \| "surface" ...` The variant of the component.
`active`	`false`	`boolean` If `true`, the button is represented as active.
`disabled`	`false`	`boolean` If `true`, the button is disabled.
`disableRipple`	`false`	`boolean` If `true`, disable ripple effects when pressing a element.
`fullRounded`	`false`	`boolean` If `true`, the button is full rounded. Else, it'll be slightly round.
`icon`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The icon to be used in the button.
`loading`	`false`	`boolean` If `true`, the loading state of the button is represented.
`type`	`"button"`	`"button" \| "reset" \| "submit"` The type of button. Accepts `button`, `reset`, or `submit`.

Drawer.CloseTrigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Content

Prop	デフォルト	型 / 説明
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.DragBar

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Footer

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Header

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.OpenTrigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Overlay

Prop	デフォルト	型 / 説明
`as`	-	`DOMElement` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Drawer.Title

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。