Popover

トリガー要素に紐づけて表示されるポップオーバー。配置方向と矢印表示をカスタマイズ可能。

インストール

import { Popover } from "@ginga-ui/core";

基本的な使い方

トリガーの下に表示されるシンプルなポップオーバーです。フォーカス管理とキーボード操作に対応しています。

export function BasicExample() {
  return (
    <PopoverTrigger>
      <Button variant="filled">詳細を表示</Button>
      <Popover>
        <p>これはポップオーバーの内容です。</p>
      </Popover>
    </PopoverTrigger>
  );
}

表示位置

placementプロップでtop、bottom、left、rightなどの表示位置を指定できます。

export function PlacementsExample() {
  return (
    <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
      {(["top", "bottom", "left", "right"] as const).map((placement) => (
        <PopoverTrigger key={placement}>
          <Button variant="outline">{placement}</Button>
          <Popover placement={placement}>
            <p>{placement} に表示されます。</p>
          </Popover>
        </PopoverTrigger>
      ))}
    </div>
  );
}

矢印なし

showArrowプロップにfalseを渡すと矢印を非表示にできます。

export function WithoutArrowExample() {
  return (
    <PopoverTrigger>
      <Button variant="light">矢印なし</Button>
      <Popover showArrow={false}>
        <p>矢印のないポップオーバーです。</p>
      </Popover>
    </PopoverTrigger>
  );
}