Menubar
デスクトップ形式のキーボード操作でアプリケーションメニューを連携します。
主なプロパティ
| プロパティ | 選択肢 |
|---|---|
| 合成 | 1つの TRMenubar 内に TRMenu.Root を配置します。 |
| 方向 | horizontal は左右キー、vertical は上下キーを使います。 |
| 利用可否 | 1つの TRMenu.Root またはメニューバー全体を無効にします。 |
| 境界 | loopFocus は端で循環し、デフォルトは true です。 |
常時表示するアプリケーションコマンドに使います。サイトナビゲーションには使いません。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/menubar.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRMenubar } from '@tinyrack/ui/components/menubar';
import { TRMenu } from '@tinyrack/ui/components/menu';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
利用可否を決める
操作方向を選ぶ
境界動作を選ぶ
API
TRMenubar は Base UI ルート prop を受け取ります。orientation は 'horizontal' | 'vertical'、デフォルトは 'horizontal' です。loopFocus は boolean でデフォルト true、disabled は boolean でデフォルト false です。アクセシブルな名前を付けてください。1つのロービング tab stop を保ち、無効な子を飛ばし、フォーカス移動時に開くメニューを切り替え、Escape 後にトリガーへフォーカスを戻します。
@tinyrack/ui/components/menu の TRMenu.Root とオーバーレイパーツを合成します。Base UI の render、ルート ref、ネイティブ prop、イベント、関数形式の className / style、状態 data 属性を保ちます。@tinyrack/ui/components/menubar.css は合成するメニューパーツのスタイルを含むため、menu CSS は別途読み込みません。
TRMenubar、TRMenubarProps、TRMenubarState を公開します。