Tinyrack

Toolbar

関連するコントロールを roving keyboard focus でまとめます。

主なプロパティ

この Tinyrack wrapper は Base UI の動作、React 19 の ref、native prop、event、render contract を維持します。Playground は orientation、Root の disabled、controlled toggle state を扱い、下の example で focus loop と個別の disabled 動作を示します。Bold を操作すると controlled preview arg が更新され、Reset は Bold の pressed state とすべての control をデフォルトに戻します。

インストール

pnpm add @tinyrack/ui

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

スタイル

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

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

インポート

import { TRToolbar } from '@tinyrack/ui/components/toolbar';

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

プレイグラウンド

使用方法

書式 control パーマリンク

アイコン中心の書式ツールバーは、Base UI の `render` コントラクトを介して TRToggle コントロールを組み合わせます。すべてのアイコンにアクセシブル名を付け、各 Group にコマンド群を表す名前を付けます。

例

向きと disabled 状態 パーマリンク

Left/Right キーは横方向のコントロール間を移動し、Up/Down キーは縦方向ツールバーの見た目の列に従います。無効なグループは操作を抑止しながら、表示と名前を維持します。

API

構造

<TRToolbar.Root aria-label="エディターのコントロール">
  <TRToolbar.Group aria-label="書式設定"><TRToolbar.Button>太字</TRToolbar.Button></TRToolbar.Group>
  <TRToolbar.Separator />
  <TRToolbar.Link href="#help">ヘルプ</TRToolbar.Link>
  <TRToolbar.Input aria-label="ドキュメントタイトル" />
</TRToolbar.Root>

完全な構造は Root、Group、Button、Link、Input、Separator です。各パートは TRToolbar.Part 形式と名前付きの TRToolbarPart エクスポート形式の両方で利用でき、対応するプロパティ型と状態型も提供されます。

Root のプロパティ

プロパティ型既定値用途
orientationhorizontal | verticalhorizontal左右または上下の方向キーによる循環ナビゲーションを選択します。
loopFocusbooleantrue両端でキーボードフォーカスを循環します。
disabledbooleanfalseツールバー内のボタンと入力欄を無効にします。
renderReactElement | function<div>動作と ref を保ちながら Root 要素を置き換えます。

Group は名前付きの group を描画し、内部のボタンと入力欄を無効にできます。Button は既定で type="button" となり、focusableWhenDisabled をサポートします。false にすると無効なコマンドを循環フォーカスから外します。Input も同じ無効時のフォーカスポリシーと通常のテキスト編集キーを維持します。Link は常にナビゲーションできる設計のため、無効な Root や Group 内でも有効です。Separator は Root と反対の向きが既定です。横向きのツールバーでは Input を最大 1 つ、末尾に配置してください。

すべてのパートは className、style、ネイティブ属性、イベントハンドラー、React 19 ref、Base UI の状態に基づく render コントラクトを保持します。すべての Root と Group にアクセシブル名を付けてください。

外観

トークンフォールバック用途
--tr-toolbar-background--tinyrack-surfaceツールバーの背景。
--tr-toolbar-border--tinyrack-borderツールバーの境界線。
--tr-toolbar-color--tinyrack-textツールバーの文字色。
--tr-toolbar-control-backgroundtransparent通常時のボタン背景。
--tr-toolbar-control-background-hover--tinyrack-surface-hover有効なボタンまたはリンクのホバー時の背景。
--tr-toolbar-control-background-pressed--tinyrack-surface-pressedアクティブまたは押下状態のコントロール背景。
--tr-toolbar-input-background--tinyrack-surface入力欄の背景。
--tr-toolbar-input-border--tinyrack-control-border入力欄の境界線。
--tr-toolbar-separator-color--tinyrack-border区切り線の色。

@tinyrack/ui/components/toolbar.css を明示的にインポートしてください。基盤トークンがライト・ダーク配色、形状、フォーカスインジケーター、無効時の不透明度を提供します。