Tabs タブ

タブ切り替えコンポーネントです。制御 / 非制御、カード / ラインの 2 つの外観、タブの閉じる・追加、完全なキーボードナビゲーションをサポートします。

基本的な使い方

水墨は暈染して、気韻生動。

工筆で細密に描き、毫髪まで現れる。

import { useState } from 'react'
import { LhTabs, LhTabPane } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('ink')

  return (
    <LhTabs value={value} onChange={(name) => setValue(name)}>
      <LhTabPane name="ink" label="水墨">
        水墨暈染、気韻生動。
      </LhTabPane>
      <LhTabPane name="danqing" label="丹青">
        丹青設色、金碧輝映。
      </LhTabPane>
    </LhTabs>
  )
}

Tabs Props

プロパティ	説明	型	使用可能な値	デフォルト値
value	現在アクティブなタブの name（制御）	`string`	—	—
defaultValue	現在アクティブなタブの name（非制御のデフォルト値）	`string`	—	—
type	外観	`'line' \| 'card'`	—	`'line'`
closable	タブを閉じられるかどうか	`boolean`	—	`false`
addable	追加ボタンを表示するかどうか	`boolean`	—	`false`
tabPosition	タブの位置	`'top' \| 'bottom'`	—	`'top'`
sx	クイックレイアウトプロパティ	`SxProps`	—	—

TabPane Props

プロパティ	説明	型	デフォルト値
name	タブの一意識別子（安定したキーとして使用。動的な変更は非推奨）	`string`	—
label	タブのタイトル	`ReactNode`	—
disabled	無効にするかどうか	`boolean`	`false`
children	タブの内容	`ReactNode`	—

Tabs イベント

イベント	説明	コールバックシグネチャ	Vue 対応
onChange	アクティブタブの変化時に発火	`(name: string) => void`	`@change`
onRemove	タブを閉じた時に発火（タブの表示・非表示は業務側が制御）	`(name: string) => void`	`@remove`
onAdd	追加ボタンのクリック時に発火	`() => void`	`@add`

制御 / 非制御

value を渡すと制御、defaultValue を渡すと非制御の内部状態になります。どちらのモードでも onChange は発火します。アクティブタブを削除する時、非制御モードでは自動的に隣接する利用可能なタブに切り替わります（plus の getNameAfterRemove と合わせる）。制御モードでは業務側が onRemove で処理します。

子ノードの制限

children は直接 LhTabPane でなければなりません（.map での描画や Fragment による平坦なラップは可能だが、カスタムコンポーネントでラップしてはいけない）—— 親コンポーネントは Children.forEach で下掘りしてタブのレコードを収集しており、カスタムなラップ層は収集の失敗を招きます。

キーボード操作

APG tabs pattern に従います：フォーカスがタブボタンにある時、ArrowRight / ArrowLeft（縦方向は ArrowDown / ArrowUp）で利用可能なタブ間を移動してアクティブ化し、無効項目をスキップします。Home / End で先頭 / 末尾項目にジャンプ。Delete / Backspace で現在のタブを閉じます（closable が必要）。アクティブなタブのみ tabindex=0、それ以外は -1 です（roving tabindex）。

アクセシビリティ

タブバーは role="tablist"、タブは role="tab" で aria-selected / aria-controls を備え、パネルは role="tabpanel" で aria-labelledby を備えます。id は useId() で生成され、SSR 対応で安定しています。非アクティブなパネルは hidden 属性でアクセシビリティツリーから外されます。

ref

forwardRef<HTMLDivElement> —— ルート要素です。LhTabPane は HTMLDivElement を転送します。

スタイル

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/tabs'

基本的な使い方​

Tabs Props​

TabPane Props​

Tabs イベント​

キーボード操作​

アクセシビリティ​

ref​

スタイル​