PreviewCard
リンク先コンテンツを hover または focus したときに表示する非モーダルプレビューです。
主なプロパティ
この Tinyrack wrapper は Base UI の動作、React 19 refs、ネイティブ props、events、render contract を保ちます。Playground control は align、表示される description、label、side、title に対応します。open 状態は内部で管理されるため、hover と focus は通常の component 動作を使用します。Reset は preview を閉じた状態で再 mount し、content と positioning の既定値を復元します。
Trigger は既定で開く前に 600ms、閉じる前に 300ms 待ちます。
trigger から card へ移動する pointer path に十分な余裕がある場合だけ、delay と closeDelay で値を override します。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/preview-card.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRPreviewCard } from '@tinyrack/ui/components/preview-card';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
分離した trigger handle パーマリンク
TRPreviewCard.createHandle は、同じ場所に配置できない Trigger と Root を関連付けます。プレビューは操作不可のまま、リンク先の内容を反映します。
timing と collision-safe な配置 パーマリンク
カードでは、上側への配置、末尾揃え、矢印、ビューポートを考慮した収まり方を確認できます。
API
すべての compound part と prop/state type は @tinyrack/ui/components/preview-card から export されます。style は対応する CSS subpath による opt-in のままです。Root は制御付き・非制御の open 状態を持ちます。Trigger は destination link で、delay、closeDelay、handle、optional payload を持ちます。Portal は DOM container を選択し、Backdrop は任意です。Positioner は collision-aware な配置、Popup は preview、Arrow は active trigger の方向を示します。複数 trigger 間で animated content を切り替える場合だけ Viewport を使用します。TRPreviewCard.createHandle<Payload>() は分離した trigger と root を関連付けます。
Popup content は non-interactive に保ってください。preview content は touch および screen-reader ユーザーには提供されないため、trigger destination にも存在する情報だけを要約します。Escape は現在の focus context を移動せずに開いた preview を閉じます。
TRPreviewCard is a progressive enhancement for mouse hover and keyboard focus, not
a touch-only disclosure. The trigger remains a real link: tapping it follows its
href, so do not put required information or the only path to an action inside
the preview. Provide a separate button/dialog pattern when touch users must open
the supplemental surface without navigating.