NativePopover

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

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

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
  </NativePopover.Content>
</NativePopover.Root>

NativePopoverはHTML Popover APIを使用しており、Popoverコンポーネントと比較して、パフォーマンスとアクセシビリティが向上しています。ただし、HTML Popover APIをサポートしているブラウザが必要です。

使い方

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

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

import { NativePopover } from "@workspaces/ui"

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

サイズを変更する

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

        <NativePopover.Content>
          <NativePopover.Header>ベジータ!</NativePopover.Header>
          <NativePopover.Body>
            がんばれカカロット……お前がナンバー１だ！！
          </NativePopover.Body>
        </NativePopover.Content>
      </NativePopover.Root>
    )}
  </For>
</Wrap>

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

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
    <NativePopover.Footer>第280話</NativePopover.Footer>
  </NativePopover.Content>
</NativePopover.Root>

閉じるトリガーを追加する

ポップオーバー内に閉じるボタンを追加する場合は、NativePopover.CloseTriggerを使用します。

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

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
    <NativePopover.Footer>
      <NativePopover.CloseTrigger>
        <Button>Close</Button>
      </NativePopover.CloseTrigger>
    </NativePopover.Footer>
  </NativePopover.Content>
</NativePopover.Root>

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

Display Popover Here

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

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

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
  </NativePopover.Content>
</NativePopover.Root>

配置を変更する

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

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

        <NativePopover.Content>
          <NativePopover.Header>ベジータ!</NativePopover.Header>
          <NativePopover.Body>
            がんばれカカロット……お前がナンバー１だ！！
          </NativePopover.Body>
        </NativePopover.Content>
      </NativePopover.Root>
    )}
  </For>
</Wrap>

オフセットを変更する

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

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

    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>

  <NativePopover.Root offset={[16, 16]}>
    <NativePopover.Trigger>
      <Button>Offset</Button>
    </NativePopover.Trigger>
    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>
</HStack>

HTML Popover APIは、ポップオーバーの動作を制御するための異なるモードをサポートしています。これはNativePopoverをPopoverコンポーネントと区別する重要な機能です。

<Wrap gap="md">
  <NativePopover.Root popover="auto">
    <NativePopover.Trigger>
      <Button>Click Me</Button>
    </NativePopover.Trigger>

    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>

  <NativePopover.Root popover="hint">
    <NativePopover.Trigger>
      <Button>Click Me</Button>
    </NativePopover.Trigger>

    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>

  <NativePopover.Root popover="manual">
    <NativePopover.Trigger>
      <Button>Click Me</Button>
    </NativePopover.Trigger>

    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>
</Wrap>

無効にする

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

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

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
  </NativePopover.Content>
</NativePopover.Root>

ネストさせる

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

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      <Text>がんばれカカロット……お前がナンバー１だ！！</Text>

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

        <NativePopover.Content>
          <NativePopover.Header>ベジータ!</NativePopover.Header>
          <NativePopover.Body>
            がんばれカカロット……お前がナンバー１だ！！
          </NativePopover.Body>
        </NativePopover.Content>
      </NativePopover.Root>
    </NativePopover.Body>
  </NativePopover.Content>
</NativePopover.Root>

Props

NativePopover.Root

Prop	デフォルト	型 / 説明
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xs"` The size of the component.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`disabled`	`false`	`boolean` If `true`, the popover will be disabled.
`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.
`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.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`open`	`true`	`boolean` Whether the popper should be enabled.
`placement`	`"end"`	`Direction` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`popover`	`"auto"`	`"" \| "auto" \| "hint" \| "manual" \| true` The mode of the popover.
`popoverTarget`	-	`string` The target element ID for the popover trigger. If not provided, a generated ID will be used.
`popoverTargetAction`	`"toggle"`	`"hide" \| "show" \| "toggle"` The action for the popover target.
`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.
`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`).

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

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

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

NativePopover.Content

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.

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

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

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

類似のコンポーネント

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

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

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

Menuは、一般的なドロップダウンメニューを表示するコンポーネントです。

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

Indicatorは、アバターなどの要素の隅に表示するコンポーネントです。

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

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

NativePopover

使い方

サイズを変更する

フッターを追加する

閉じるトリガーを追加する

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

配置を変更する

オフセットを変更する

ポップオーバーのモード

無効にする

ネストさせる

Props

NativePopover.Root

NativePopover.Anchor

NativePopover.Body

NativePopover.CloseTrigger

NativePopover.Content

NativePopover.Footer

NativePopover.Header

NativePopover.Trigger

類似のコンポーネント

Tooltip

Popover

Modal

Menu

Drawer

Indicator

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

Popover

NativePopover.Root

NativePopover.Anchor

NativePopover.Body

NativePopover.CloseTrigger

NativePopover.Content

NativePopover.Footer

NativePopover.Header

NativePopover.Trigger