Popover
ダイアログの意味、タイトル、説明、閉じるアクション、配置、解除を備えた非モーダルのアンカーコンテンツです。
主なプロパティ
制御付き open または非制御の defaultOpen を使います。Positioner は Base UI の side、alignment、offset、collision prop を受け取ります。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/popover.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRPopover } from '@tinyrack/ui/components/popover';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
配置する側 パーマリンク
各トリガーが指定した側に、トリガーを基準とするポップアップを開き、衝突を回避します。
インライン配置 パーマリンク
side とは別に start、center、end を選びます。
制御付き lifecycle、collision、offset パーマリンク
ライブ状態には制御された `open` の変更が反映されます。`side` と `alignment` のオフセットは、インライン端付近でも衝突を回避します。
分離した trigger handle パーマリンク
型付きハンドルが Root 外部のトリガーを接続し、ペイロードをポップアップのコンテンツへ渡します。
API
Base UI が anchor の配置、collision 回避、focus 動作、portal、dialog 関係、outside/Escape による解除を担当します。補助的な action では surface を non-modal に保ち、背後の page をブロックする必要がある task には TRDialog を使います。
TRPopover.Root
open または defaultOpen、onOpenChange、modal、imperative actionsRef、trigger ID、型付き handle を管理し、DOM 要素は描画しません。
TRPopover.Trigger
開く button を描画し、handle、payload、openOnHover、delay、closeDelay、render、native button props、ref を受け取ります。
TRPopover.Portal
既定では layer を document.body に移動します。container で host を指定し、keepMounted で非表示コンテンツを保持します。
TRPopover.Positioner
side、align、sideOffset、alignOffset、collisionAvoidance、collisionBoundary、collisionPadding、anchor、sticky、disableAnchorTracking、arrowPadding を受け取ります。
TRPopover.Popup
non-modal dialog を描画し、title/description の関係と open、closed、side、alignment、transition の data attribute を公開します。
TRPopover.Arrow
配置された arrow を描画します。--tr-layer-arrow-size でサイズを変更できます。
TRPopover.Backdrop
任意の backdrop を描画し、主に modal または trap-focus 表示で使います。
TRPopover.Title
aria-labelledby を通じて Popup をラベル付けします。
TRPopover.Description
aria-describedby を通じて Popup を説明します。
TRPopover.Close
active popover を閉じ、Base UI の dismissal 動作に従って focus を復元します。
TRPopover.Viewport
handle ベースの popover が複数の trigger 間で切り替わる際の animated content transition を保持します。
TRPopover.createHandle
分離した trigger 用の TRPopoverHandle<Payload> を作成します。同じ handle を Root と Trigger に渡すと、Trigger の payload が Root render 関数で利用できます。