コンポーネント一覧
Tabs
内容が対等な場合に使う。手順のように順序があるものには使わない。
デモ
使い分け
こうする
- 同じ対象の別の面を切り替えるときに使う（商品の「詳細」と「レビュー」）
こうしない
- 手順（1 → 2 → 3）に使わない。順番があるならステップ表示にする
- タブの中身が空のタブを出さない。消すか isDisabled にする
Props
| 名前 | 型 | 説明 |
|---|---|---|
| variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'plain' | |
| size | 'sm' | 'md' | 'lg' | |
| orientation | 'horizontal' | 'vertical' | |
| selectedKey | string | |
| defaultSelectedKey | string | |
| onSelectionChange | (key: string) => void | |
| isDisabled | boolean | |
| disabledKeys | string[] | |
| children | ReactNode | |
| classNames | ClassNames<typeof tabsSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- list必須
- tab必須
- indicator
- panel必須
アクセシビリティ
| キー | 動作 |
|---|---|
| ← →（縦は ↑ ↓） | タブを移動して選ぶ |
| Home / End | 最初 / 最後のタブへ |
| Tab | パネルの中へ |
- 矢印キーでタブ間を移動し、Tab キーはパネルへ移る。選択中のタブは `aria-selected`
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。