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.
`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.
`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.

アクセシビリティ

Drawerは、アクセシビリティに関してWAI-ARIA - Dialog (Modal) Patternに従います。

モーダルが開くと、フォーカスはモーダル内にロックされます。つまり、モーダルを閉じない限り、モーダル外の要素をフォーカスすることはできません。

キー	説明	状態
`Tab`	モーダル内の無効ではない次の要素にフォーカスします。最後の要素の場合は最初の無効ではない要素をフォーカスします。	`open={true}`
`Shift` + `Tab`	モーダル内の無効ではない前の要素をフォーカスします。最初の要素の場合は最後の無効ではない要素をフォーカスします。	`open={true}`
`Escape`	モーダルを閉じます。	`open={true}` + `closeOnEsc={true}`

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Drawer.Content`	`role="dialog"`	ダイアログであることを示します。
	`aria-modal="true"`	表示されているウィジェットがモーダルであることを示します。
	`aria-labelledby`	関連した`Drawer.Title`の`id`を設定します。
	`aria-describedby`	関連した`Drawer.Body`の`id`を設定します。
`Drawer.OpenTrigger`	`aria-expanded`	モーダルが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
	`aria-controls`	モーダルが開いている場合は`Drawer.Content`の`id`を設定し、閉じている場合は設定しません。
	`aria-haspopup="dialog"`	ダイアログが存在することを示します。
	`aria-label`	`"モーダルを開く"`を設定します。
`Drawer.CloseButton`	`aria-label`	`"モーダルを閉じる"`を設定します。
`Drawer.CloseTrigger`	`aria-label`	`"モーダルを閉じる"`を設定します。
`Drawer.Overlay`	`aria-hidden="true"`	要素をアクセシビリティツリーから除外します。

類似のコンポーネント

Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。

Tooltipは、要素の補足など短い情報を表示するコンポーネントです。

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

SlideFadeは、要素を指定位置から移動しながら次第に表示または非表示にするコンポーネントです。

Slideは、要素をページの隅から表示または非表示にするコンポーネントです。

Fadeは、要素を次第に表示または非表示にするコンポーネントです。

Collapseは、要素を展開または折りたたんで表示するコンポーネントです。

FadeScaleは、要素を次第に拡大して表示または縮小して非表示にするコンポーネントです。

使用しているコンポーネント・フック

Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。

Buttonは、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。

CloseButtonは、基本的にコンポーネントの閉じる機能をトリガーするために使用するコンポーネントです。

FocusLockは、モーダルやダイアログなどの要素でフォーカスを制限し、フォーカスをその範囲内にロックすることで、アクセシビリティを向上させるコンポーネントです。

Motionは、MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントです。

Portalは、現在のDOM階層の外側に要素をレンダリングするコンポーネントです。

Slideは、要素をページの隅から表示または非表示にするコンポーネントです。

Fadeは、要素を次第に表示または非表示にするコンポーネントです。

useValueは、useBreakpointValueとuseColorModeValueを組み合わせたカスタムフックです。