Menu
専用トリガーからキーボード操作できるコマンドを表示します。
主なプロパティ
| プロパティ | 選択肢 |
|---|---|
| コマンド | 操作は Item、移動は LinkItem、維持する選択は selection item を使います。 |
| 方向 | 通常は vertical、横並びのコマンドには horizontal を使います。 |
| 配置 | Positioner の4つの side と3つの align を使います。 |
| 所有 | Trigger と Root を同じ場所に置くか、createHandle で分離パーツを接続します。 |
専用トリガーからコマンドを開く場合に使います。任意の右クリック対象には TRContextMenu、サイトの移動先には TRNavigationMenu を使います。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/menu.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRMenu } from '@tinyrack/ui/components/menu';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
コマンドの意味を選ぶ
キーボード方向を選ぶ
ポップアップを配置する
分離したトリガーを接続する
キーボードモデルに従う
API
状態とオーバーレイ
Root は open と onOpenChange による制御状態、defaultOpen による非制御状態、orientation、loopFocus、modal、disabled をサポートします。Trigger が開きます。Portal、Backdrop、Positioner、Popup、Arrow、任意の Viewport が衝突回避レイヤーを構成します。Positioner は side、align、offset、衝突回避、カスタム anchor をサポートします。
コンテンツと合成
Group、GroupLabel、Separator で整理します。Item、LinkItem、CheckboxItem、CheckboxItemIndicator、RadioGroup、RadioItem、RadioItemIndicator がコマンドの意味を提供します。SubmenuRoot と SubmenuTrigger はネストした状態とキーボード操作を管理します。
createHandle は分離した Trigger payload と Root を接続する型付き Base UI handle を返します。すべてのパーツ、prop 型、状態型を名前付きで公開し、Base UI の render、ref、ネイティブ prop、イベント、状態 data 属性を保ちます。CSS は明示的に読み込みます。