Tinyrack

Drawer

ビューポートの端からスライドし、開閉時に背景をフェードするスワイプ対応のタスクサーフェスです。

主なプロパティ

TRDrawer は Base UI の制御付き・非制御状態、スワイプとスナップポイントのジェスチャー、フォーカス管理、キーボードによる終了、ポータル、React 19 の ref と render プロパティを維持します。モーションは swipeDirection と視差効果を減らす設定に従います。プレイグラウンドはドロワーのイベントで open と snapPoint を同期し、リセットすると閉じた全高の下向きドロワーという既定値に戻ります。

インストール

pnpm add @tinyrack/ui

長い行はコード領域を横にスクロールして確認できます。

スタイル

@import '@tinyrack/ui/components/drawer.css';

長い行はコード領域を横にスクロールして確認できます。

インポート

import { TRDrawer } from '@tinyrack/ui/components/drawer';

長い行はコード領域を横にスクロールして確認できます。

プレイグラウンド

使用方法

既定 パーマリンク

例

スナップポイントと入れ子のコンテンツ パーマリンク

`compact`、`medium`、`full-height` の位置間をドラッグします。入れ子のドロワーでは、フォーカスを内部に留める動作と連動するインデントを確認できます。

方向 パーマリンク

`swipeDirection` は `down`、`up`、`left`、`right` に設定できます。ポップアップは対応するビューポート端に接し、同じ方向へ閉じます。左右のドロワーには、枠線のないエッジサーフェスを使います。

Provider、外部ハンドル、スワイプ領域 パーマリンク

Provider はページのインデントを調整します。型付きの外部トリガーは `createHandle` でペイロードを渡し、SwipeArea はビューポート端から同じドロワーを開きます。

仮想キーボード パーマリンク

VirtualKeyboardProvider は、モバイルの仮想キーボードによってビジュアルビューポートが変化しても、フォーカス中のフィールドを表示範囲内に保ちます。

構造

Root は状態を管理し、Trigger はドロワーを開きます。Portal はオーバーレイを body または指定したコンテナーにマウントします。Backdrop、Viewport、Popup、スクロール可能な Content がモーダルサーフェスを構成します。Title と Description はダイアログのラベルを提供し、Close はドロワーを閉じます。SwipeArea は画面端から開く操作を提供します。Provider、Indent、IndentBackground は入れ子になったページの効果を調整します。VirtualKeyboardProvider はモバイルキーボードによるビューポートの変化を処理します。createHandle は型付きペイロードを使う分離したトリガーを接続します。

動作

  • 制御付きの表示状態には open と onOpenChange、非制御の表示状態には defaultOpen を使います。
  • 制御付きの位置には snapPoint と onSnapPointChange、非制御の位置には defaultSnapPoint を使い、許可する値を snapPoints に指定します。
  • swipeDirection は画面端と終了方向を決めます。左右のドロワーは枠線のないエッジサーフェスで、上下のドロワーは既存の枠線付きオーバーレイサーフェスを維持します。snapToSequentialPoints は速度によるスナップポイントの飛び越しを防ぎます。
  • Escape キー、Close、背景の押下、非モーダル時のフォーカス移動、スワイプが既定の終了操作です。外側のポインター操作による終了を防ぐには disablePointerDismissal を使います。
  • modal の既定値は true です。外側の操作を許可するには false、スクロールをロックせずフォーカスだけを閉じ込めるには trap-focus を使います。
  • Popup の initialFocus と finalFocus でフォーカス移動を指定します。既定ではフォーカスがドロワーに入り、トリガーに戻ります。
  • actionsRef は命令的な close と unmount を提供します。通常のフローでは宣言的な状態管理を推奨します。
  • Portal はクライアントでマウントされ、閉じた状態の SSR マークアップはハイドレーションでも安全です。既定の body ポータルは、確保されたスクロールバー領域を含むビジュアルビューポート全体を覆います。カスタムポータルでは、Viewport が指定したコンテナー内に収まります。

API

すべての複合パートとプロパティ・状態型は @tinyrack/ui/components/drawer からエクスポートされます。CSS は @tinyrack/ui/components/drawer.css を明示的に読み込んだ場合だけ適用され、--tr-drawer-popup-max-width、--tr-drawer-popup-background、--tr-drawer-backdrop、--tr-drawer-control-background、--tr-drawer-motion-duration、--tr-drawer-motion-easing で外観とモーションを上書きできます。