Popover

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

<Popover.Root>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>空条承太郎</Popover.Header>
    <Popover.Body>やれやれだぜ</Popover.Body>
  </Popover.Content>
</Popover.Root>

使い方

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

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

import { Popover } from "@workspaces/ui"

<Popover.Root>
  <Popover.Anchor />
  <Popover.Trigger />
  <Popover.Content>
    <Popover.Header />
    <Popover.Body />
    <Popover.Footer />
  </Popover.Content>
</Popover.Root>

サイズを変更する

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg"]}>
    {(size) => (
      <Popover.Root key={size} size={size}>
        <Popover.Trigger>
          <Button>Size ({size})</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>花京院典明</Popover.Header>
          <Popover.Body>レロレロレロレロレロレロ</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    )}
  </For>
</Wrap>

<Popover.Root>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>ジョルノ・ジョバァーナ</Popover.Header>
    <Popover.Body>僕には夢がある</Popover.Body>
    <Popover.Footer>黄金の風</Popover.Footer>
  </Popover.Content>
</Popover.Root>

別の要素を参照して表示する場合は、Popover.Anchorを使用します。

Here Display Popover

<Popover.Root>
  <Wrap gap="md">
    <Popover.Anchor>
      <Center borderWidth="1px" h="10" px="3" rounded="l2">
        Here Display Popover
      </Center>
    </Popover.Anchor>

    <Popover.Trigger>
      <Button>Click Me</Button>
    </Popover.Trigger>
  </Wrap>

  <Popover.Content>
    <Popover.Header>ジョセフ・ジョースター</Popover.Header>
    <Popover.Body>お前の次のセリフは…「そんなバカな！」と言う</Popover.Body>
  </Popover.Content>
</Popover.Root>

アニメーションを変更する

アニメーションを変更する場合は、animationSchemeに"block-start"や"inline-end"などを設定します。デフォルトでは"scale"が設定されています。

<Wrap gap="md">
  <For
    each={["scale", "block-start", "inline-start", "inline-end", "block-end"]}
  >
    {(animationScheme) => (
      <Popover.Root key={animationScheme} animationScheme={animationScheme}>
        <Popover.Trigger>
          <Button>{toTitleCase(animationScheme)}</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>ブローノ・ブチャラティ</Popover.Header>
          <Popover.Body>アリーヴェデルチ（さよならだ）</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    )}
  </For>
</Wrap>

配置を変更する

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

<Wrap gap="md">
  <For
    each={["start", "start-start", "start-end", "end", "end-start", "end-end"]}
  >
    {(placement) => (
      <Popover.Root key={placement} placement={placement}>
        <Popover.Trigger>
          <Button>{toTitleCase(placement)}</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>ディアボロ</Popover.Header>
          <Popover.Body>これが…レクイエム…だ</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    )}
  </For>
</Wrap>

所要時間を変更する

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

<Popover.Root duration={0.7}>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>吉良吉影</Popover.Header>
    <Popover.Body>僕は平穏に暮らしたいだけなんだ</Popover.Body>
  </Popover.Content>
</Popover.Root>

オフセットを変更する

オフセットを変更する場合は、gutterまたはoffsetに値を設定します。

<HStack>
  <Popover.Root gutter={32}>
    <Popover.Trigger>
      <Button>Gutter</Button>
    </Popover.Trigger>

    <Popover.Content>
      <Popover.Header>東方仗助</Popover.Header>
      <Popover.Body>グレートだぜ</Popover.Body>
    </Popover.Content>
  </Popover.Root>

  <Popover.Root offset={[16, 16]}>
    <Popover.Trigger>
      <Button>Offset</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Popover.Header>東方仗助</Popover.Header>
      <Popover.Body>グレートだぜ</Popover.Body>
    </Popover.Content>
  </Popover.Root>
</HStack>

モーダルにする場合は、modalをtrueに設定します。スクロールブロックとフォーカストラップが有効になります。

<Popover.Root modal>
  <Popover.Trigger>
    <Button>Open Profile</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>フーゴ・パンナコッタ</Popover.Header>
    <Popover.Body>
      <Field.Root label="スタンド名">
        <Input placeholder="パープル・ヘイズ" />
      </Field.Root>

      <Field.Root label="能力">
        <Input type="text" placeholder="ウイルス散布" />
      </Field.Root>
    </Popover.Body>
  </Popover.Content>
</Popover.Root>

無効にする

無効にする場合は、disabledをtrueに設定します。

<Popover.Root disabled>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>虹村億泰</Popover.Header>
    <Popover.Body>おい、仗助！</Popover.Body>
  </Popover.Content>
</Popover.Root>

外側のクリック時に閉じない

外側のクリック時に閉じない場合は、closeOnBlurをfalseに設定します。

<Popover.Root closeOnBlur={false}>
  <Popover.Trigger>
    <Button>No Close on Blur</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>イギー</Popover.Header>
    <Popover.Body>んがくく（犬の鳴き声）</Popover.Body>
  </Popover.Content>
</Popover.Root>

ESCキーが入力された時に閉じない

ESCキーが入力された時に閉じない場合は、closeOnEscをfalseに設定します。

<Popover.Root closeOnEsc={false}>
  <Popover.Trigger>
    <Button>No Close on ESC</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>ディオ・ブランドー</Popover.Header>
    <Popover.Body>無駄無駄無駄！</Popover.Body>
  </Popover.Content>
</Popover.Root>

自動フォーカスを無効にする

自動フォーカスを無効にする場合は、autoFocusをfalseに設定します。

<Popover.Root autoFocus={false}>
  <Popover.Trigger>
    <Button>No Auto Focus</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>岸辺露伴</Popover.Header>
    <Popover.Body>
      <Field.Root label="職業">
        <Input placeholder="漫画家" />
      </Field.Root>
    </Popover.Body>
  </Popover.Content>
</Popover.Root>

初回のフォーカスを設定する

初回のフォーカスを設定する場合は、initialFocusRefにRefを渡します。

const inputRef = useRef<HTMLInputElement>(null)

return (
  <Popover.Root initialFocusRef={inputRef}>
    <Popover.Trigger>
      <Button>Focus Email Input</Button>
    </Popover.Trigger>

    <Popover.Content>
      <Popover.Header>ナランチャ・ギルガ</Popover.Header>
      <Popover.Body>
        <Field.Root label="スタンド名">
          <Input placeholder="エアロスミス" />
        </Field.Root>

        <Field.Root label="好きなもの">
          <Input ref={inputRef} type="text" placeholder="飛行機とピザ" />
        </Field.Root>
      </Popover.Body>
    </Popover.Content>
  </Popover.Root>
)

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

スクロールをブロックする

スクロールをブロックする場合は、blockScrollOnMountをtrueに設定します。

<Popover.Root blockScrollOnMount>
  <Popover.Trigger>
    <Button>Block Scroll</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>岸辺露伴</Popover.Header>
    <Popover.Body>だが断る</Popover.Body>
  </Popover.Content>
</Popover.Root>

スクロール時に閉じる

スクロール時に閉じる場合は、closeOnScrollをtrueに設定します。

<Popover.Root closeOnScroll>
  <Popover.Trigger>
    <Button>Close on Scroll</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>ギアッチョ</Popover.Header>
    <Popover.Body>根掘り葉掘り聞きやがって！</Popover.Body>
  </Popover.Content>
</Popover.Root>

ネストさせる

<Popover.Root>
  <Popover.Trigger>
    <Button>Open Parent</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>花京院典明</Popover.Header>
    <Popover.Body>
      <Text>やはりエジプトか……いつ出発する？</Text>

      <Popover.Root>
        <Popover.Trigger>
          <Button>わたしも同行する</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>空条承太郎</Popover.Header>
          <Popover.Body>花京院</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    </Popover.Body>
  </Popover.Content>
</Popover.Root>

制御する

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

return (
  <Popover.Root open={open} onClose={onClose} onOpen={onOpen}>
    <Popover.Trigger>
      <Button>Click Me</Button>
    </Popover.Trigger>

    <Popover.Content>
      <Popover.Header>スピードワゴン</Popover.Header>
      <Popover.Body>
        こいつはくせえッー！ ゲロ以下のにおいがプンプンするぜッーーーーッ!!
      </Popover.Body>
    </Popover.Content>
  </Popover.Root>
)

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

Props

Popover.Root

Prop	デフォルト	型 / 説明
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xs"` The size of the component.
`animationScheme`	`"scale"`	`"none" \| "scale" \| SimplePlacement` The animation of the element.
`autoFocus`	`true`	`boolean` If `true`, focus will be transferred to the first interactive element when the popover opens.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`blockScrollOnMount`	`false`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`children`	-	`ReactNodeOrFunction<{ open: boolean onClose: () => void }>` The children of the popover.
`closeOnBlur`	`true`	`boolean` If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
`closeOnEsc`	`true`	`boolean` If `true`, the popover will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the popover will hide on scroll.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`disabled`	`false`	`boolean` If `true`, the popover will be disabled.
`duration`	`0.2`	`PopupAnimationProps["duration"]` The animation duration.
`elements`	-	`{ floating?: HTMLElement \| null reference?: null \| Reference<Y> }` Object containing the reference and floating elements.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`initialFocusRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the element that should receive focus when the popover opens.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`middleware`	-	`(false \| Middleware \| null \| undefined)[]` Array of middleware objects to modify the positioning or provide data for rendering.
`modal`	`false`	`boolean` If `true`, the popover will be modal. - scrolling is blocked. - focus is trapped within the popover.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openOnClick`	`true`	`boolean` If `true`, the popover will be opened when click on the field.
`placement`	`"end"`	`Direction` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`strategy`	`"absolute"`	`Strategy` The CSS positioning strategy to use.
`transferFocus`	`true`	`boolean` If `true`, the focus will be transferred to the popover content when the tab key is pressed.
`transform`	`true`	`boolean` Whether to use `transform` for positioning instead of `top` and `left` (layout) in the `floatingStyles` object.
`updateRef`	-	`RefObject<() => void>` Update the position of the floating element, re-rendering the component if required.
`whileElementsMounted`	-	`(reference: Reference<Y>, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).
`withCloseButton`	`true`	`boolean` If `true`, display the popover close button.

Popover.Anchor

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.

Popover.Body

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.

Popover.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.
`portalProps`	-	`Omit<PortalProps, "children">` Props for portal component.

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

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

Popover.Trigger

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.

アクセシビリティ

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

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

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

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Popover.Content`	`role="dialog"`	ダイアログであることを示します。
	`aria-labelledby`	関連した`Popover.Header`の`id`を設定します。
	`aria-describedby`	関連した`Popover.Body`の`id`を設定します。
	`aria-hidden`	ポップオーバーが開いている場合は`"false"`を設定し、閉じている場合は`"true"`を設定します。
	`aria-modal`	`modal={true}`の場合は`"true"`を設定します。
`Popover.Trigger`	`role="button"`	ボタンであることを示します。
	`aria-expanded`	ポップオーバーが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
	`aria-controls`	ポップオーバーが開いている場合は関連した`Popover.Content`の`id`を設定し、閉じている場合は`undefined`を設定します。
	`aria-haspopup="dialog"`	ダイアログをトリガーすることを示します。
`Popover.Header`	`id`	`Popover.Content`と関連付けるために使用する`id`。
`Popover.Body`	`id`	`Popover.Content`と関連付けるために使用する`id`。

Popover

使い方

サイズを変更する

フッターを追加する

別の要素を参照して表示する

アニメーションを変更する

配置を変更する

所要時間を変更する

オフセットを変更する

無効にする

外側のクリック時に閉じない

ESCキーが入力された時に閉じない

自動フォーカスを無効にする

初回のフォーカスを設定する

スクロールをブロックする

スクロール時に閉じる

ネストさせる

制御する

Props

Popover.Root

Popover.Anchor

Popover.Body

Popover.Content

Popover.Footer

Popover.Header

Popover.Trigger

アクセシビリティ

キーボード操作

ARIAロールと属性

Popover.Root

Popover.Anchor

Popover.Body

Popover.Content

Popover.Footer

Popover.Header

Popover.Trigger