Popover

トリガーに寄り添う吹き出し。

要素に寄り添って開く吹き出しです。フォーカスを奪うモーダルが必要なら Dialog、説明文だけなら Tooltip を使います。

export const client = "only";

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
  Button,
  Label,
  Input,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>表示件数</PopoverTrigger>
      <PopoverContent align="start" className="w-72">
        <PopoverHeader>
          <PopoverTitle>表示件数</PopoverTitle>
          <PopoverDescription>1 ページあたりの行数を変えます。</PopoverDescription>
        </PopoverHeader>
        <div className="grid gap-2 pt-3">
          <Label htmlFor="rows">行数</Label>
          <Input id="rows" type="number" defaultValue={25} />
        </div>
      </PopoverContent>
    </Popover>
  );
}

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
} from "@squadbase/vantage/ui";

位置

PopoverContent の side（既定 bottom）、align（既定 center）、sideOffset（既定 4）で決まります。

トリガーの幅に合わせる

Base UI は --anchor-width という CSS 変数を出しています（Radix の --radix-popover-trigger-width に相当）。

<PopoverContent className="w-(--anchor-width)">…</PopoverContent>