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.

アクセシビリティ

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