Drawer

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

インポート

import {
  Drawer,
  DrawerOverlay,
  DrawerCloseButton,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
} from "@yamada-ui/react"

Copied!

Drawer: パネルの状態を制御するラッパーコンポーネントです。
DrawerOverlay: パネルの背後に存在するオーバーレイのコンポーネントです。
DrawerCloseButton: パネルを閉じるボタンのコンポーネントです。
DrawerHeader: パネルのヘッダーを表示するコンポーネントです。
DrawerBody: パネルのメインコンテンツを表示するコンポーネントです。
DrawerFooter: パネルのフッターを表示するコンポーネントです。

DrawerOverlayとDrawerCloseButtonは、省略することができます。

使い方

表示または非表示を制御するために、isOpenとonCloseを設定します。

Drawerは、内部的にModalを使用しています。

編集可能な例

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

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

    <Drawer isOpen={isOpen} onClose={onClose}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

サイズを変更する

編集可能な例

const sizeMap = ["xs", "sm", "md", "lg", "xl", "full"]
const [size, setSize] = useState("md")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      {sizeMap.map((size) => (
        <Button
          key={size}
          onClick={() => {
            setSize(size)
            onOpen()
          }}
        >
          Open {size} Drawer
        </Button>
      ))}
    </Wrap>

    <Drawer isOpen={isOpen} onClose={onClose} size={size}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、rightが設定されています。

編集可能な例

const placementMap = ["top", "right", "bottom", "left"]
const [placement, setPlacement] = useState("center")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      {placementMap.map((placement) => (
        <Button
          key={placement}
          onClick={() => {
            setPlacement(placement)
            onOpen()
          }}
        >
          Open {placement} Drawer
        </Button>
      ))}
    </Wrap>

    <Drawer isOpen={isOpen} onClose={onClose} placement={placement}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

所要時間を変更する

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

編集可能な例

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

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

    <Drawer isOpen={isOpen} onClose={onClose} duration={0.7}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

画面の高さに合わせる

パネルを画面の高さに合わせたい場合は、isFullHeightをtrueに設定します。

編集可能な例

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

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

    <Drawer isOpen={isOpen} onClose={onClose} placement="bottom" isFullHeight>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

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

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

編集可能な例

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

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

    <Drawer isOpen={isOpen} onClose={onClose} blockScrollOnMount={false}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

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

DrawerCloseButtonにpropsなどを渡して、カスタマイズしたい場合は、省略せずに設定します。

編集可能な例

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

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

    <Drawer isOpen={isOpen} onClose={onClose}>
      <DrawerCloseButton color="red.500" />

      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

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

onCloseを設定しない場合は、閉じるボタンを無効(非表示)になります。

デフォルトでは、オーバーレイをクリック時にモーダルは閉じます。onCloseが設定されないことでオーバーレイのクリックして閉じる動作も無効になることに注意してください。

編集可能な例

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

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

    <Drawer isOpen={isOpen}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

ドラッグして閉じる

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

編集可能な例

const placementMap = ["top", "right", "bottom", "left"]
const [placement, setPlacement] = useState("center")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      {placementMap.map((placement) => (
        <Button
          key={placement}
          onClick={() => {
            setPlacement(placement)
            onOpen()
          }}
        >
          Open {placement} Drawer
        </Button>
      ))}
    </Wrap>

    <Drawer closeOnDrag isOpen={isOpen} onClose={onClose} placement={placement}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

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

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

編集可能な例

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

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

    <Drawer
      isOpen={isOpen}
      onClose={onClose}
      closeOnDrag
      withDragBar={false}
      withCloseButton
    >
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

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

DrawerOverlayにpropsなどを渡して、カスタマイズしたい場合は、省略せずに設定します。

編集可能な例

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

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

    <Drawer isOpen={isOpen} onClose={onClose}>
      <DrawerOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />

      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

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

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

編集可能な例

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

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

    <Drawer isOpen={isOpen} onClose={onClose} withOverlay={false}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

      <DrawerFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </DrawerFooter>
    </Drawer>
  </>
)

Copied!

GitHubでこのページを編集する

前Dialog 次Menu