Tabs
3 種類の密度、2 種類の方向、手動・自動アクティベーションに対応するキーボード操作可能なビューです。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
uiSize | md, lg | md |
orientation | horizontal, vertical | horizontal |
| disabled tab | TRTabs.Tab disabled | false |
| activation | manual or activateOnFocus | manual |
| focus | looping or bounded | looping |
| state | controlled value, including null, or uncontrolled defaultValue | first enabled tab |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/tabs.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRTabs } from '@tinyrack/ui/components/tabs';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
制御付き手動アクティベーション パーマリンク
矢印キーでフォーカスを移動します。Enter または Space でフォーカス中のタブを選び、結果を更新します。
例
Overflow と indicator パーマリンク
狭い tab strip は横方向に scroll し、任意の indicator が active tab に追従します。
構造
Rootは制御・非制御の選択状態、方向、uiSizeを管理します。Listはアクセシブルな名前を持つ tablist で、activation と focus のループを設定します。Tabはvalueで view を識別します。disabled tab は focus できますが activation できません。Indicatorは任意で、overflow strip 内でも active tab に追従します。Panelは同じvalueを持つ tab とアクセシブルなコンテンツを関連付けます。
API
| パート | 主な props | 説明 |
|---|---|---|
Root | value, defaultValue, onValueChange, orientation, uiSize | active tab をなくす場合は value={null} を使います。値を指定しない場合は最初の enabled tab が選択されます。 |
List | activateOnFocus, loopFocus | 手動 activation と focus のループが既定です。 |
Tab | value, disabled, render | 矢印キーで focus を移動し、手動モードでは Enter または Space で activation します。 |
Indicator | renderBeforeHydration, render | Base UI の geometry 変数で動く任意の visual marker です。 |
Panel | value, keepMounted, hiddenUntilFound, render | tab value と一致し、ARIA の関連付けを維持します。 |
Base UI が role、focus 移動、selection、hydration-safe な状態を提供します。Tinyrack foundation style の後に tabs.css を import してください。--tr-tabs-indicator-background、--tr-tabs-indicator-size、--tr-tabs-radius、--tr-tabs-tab-height、--tr-tabs-panel-padding でスタイルを調整できます。