ポップオーバー

属性	型	説明	デフォルト
children*	`ReactNode[]`	ポップオーバーのコンテンツ。通常は、`PopoverTrigger`と`PopoverContent`です。	-
size	`sm` \| `md` \| `lg`	ポップオーバーコンテンツのフォントサイズ。	`md`
color	`default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`	ポップオーバーのカラーテーマ。	`default`
radius	`none` \| `sm` \| `md` \| `lg` \| `full`	ポップオーバーのボーダー半径。	`lg`
影	`none` \| `sm` \| `md` \| `lg`	ポップオーバーの影。	`lg`
背景	`transparent` \| `opaque` \| `blur`	ポップオーバーの背景の種類。	`transparent`
配置	PopoverPlacement	トリガー参照に対するポップオーバーの配置。	`下`
状態	`OverlayTriggerState`	ポップオーバーの制御された状態。オーバレイ状態を参照してください。	-
isOpen	`boolean`	ポップオーバーがデフォルトで開いているかどうか（制御）。	-
defaultOpen	`boolean`	ポップオーバーがデフォルトで開いているかどうか（非制御）。	-
offset(px)	`number`	参照とポッパー間の距離またはマージン。オフセット修飾子を作成するために内部的に使用されます。	`7`
containerPadding(px)	`number`	要素とその周囲のコンテナの間に適用される配置パディング。	`12`
crossOffset(px)	`number`	要素とそのアンカー要素の間で、クロス軸に沿って適用される追加のオフセット。	`0`
triggerType	`dialog` \| `menu` \| `listbox` \| `tree` \| `grid`;	トリガーによって開かれるポップオーバーのタイプ。	`dialog`
showArrow	`boolean`	ポップオーバーに矢印を表示するかどうか。	`false`
shouldFlip	`boolean`	ポップオーバーが境界領域からあふれそうになったときに、配置を変更して反転するかどうか。	`true`
triggerScaleOnOpen	`boolean`	ポップオーバーが開いているときに、トリガーを縮小するかどうか。	`true`
shouldBlockScroll	`boolean`	ポップオーバーの外側のスクロールをブロックするかどうか。	`false`
isKeyboardDismissDisabled	`boolean`	ポップオーバーを閉じるために Escape キーを押すことを無効にするかどうか。	`false`
shouldCloseOnBlur	`boolean`	フォーカスが失われたり、ポップオーバーの外に移動した場合に、ポップオーバーを閉じるかどうか。	`false`
motionProps	MotionProps	Framer Motionアニメーションを修正するためのプロパティ。独自のアニメーションを作成するには、`variants` API を使用します。
portalContainer	`HTMLElement`	オーバレイポータルが配置されるコンテナ要素。	`document.body`
updatePositionDeps	`any[]`	ポップオーバーの位置更新を強制する依存関係。	`[]`
triggerRef	`RefObject<HTMLElement>`	ポップオーバーが位置を調整する基準となる要素のref。	-
scrollRef	`RefObject<HTMLElement>`	ポップオーバー内のスクロール可能な領域のref。	`overlayRef`
disableAnimation	`boolean`	ポップオーバーをアニメーション化するかどうか。	`false`
classNames	`Record<"base"｜ "trigger"｜ "backdrop"｜ "content", string>`	ポップオーバースロットのカスタムクラス名を設定できます。	-

属性	型	説明
onOpenChange	`(isOpen: boolean) => void`	ポップオーバーの開閉状態が変更されたときに呼び出されるハンドラー。
shouldCloseOnInteractOutside	`(e: HTMLElement) => void`	ユーザーがポップオーバー ref の外の引数要素を操作したときに、onClose を呼び出す必要がある場合は true を返します。これにより、ポップオーバーを閉じない要素とのインタラクションを除外できます。デフォルトでは、オーバレイ ref の外側でのインタラクションでは、常に onClose が呼び出されます。
onClose	`() => void`	ポップオーバーを閉じる必要があるときに呼び出されるハンドラー。

PopoverTrigger プロパティ

属性	型	説明	デフォルト
children*	`ReactNode`	ポップオーバートリガーコンポーネント。渡された子要素がフォーカス可能であることを確認してください。ユーザーはキーボードを使用してタブで移動でき、ref を受け取ることができます。これはアクセシビリティにとって重要です。	-

PopoverContent プロパティ

属性	型	説明	デフォルト
children	`ReactNode`	トリガーが押されたときに表示されるコンテンツ。	-

type PopoverPlacement =
  | "top"
  | "bottom"
  | "right"
  | "left"
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end"
  | "left-start"
  | "left-end"
  | "right-start"
  | "right-end";

Motion Props

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/

インストール

インポート

使い方

矢印付き

色

配置

オフセット

制御

タイトル Props

フォーム付き

背景

カスタムモーション

カスタムトリガー

スロット

カスタムスタイル

データ属性

アクセシビリティ

API

Popoverのプロパティ

ポップオーバーイベント

PopoverTrigger プロパティ

PopoverContent プロパティ

ポップオーバーのタイプ

ポップオーバーの配置

Motion Props