Tabs

コンテンツを複数のタブで切り替えて表示するコンポーネント。関連する情報をカテゴリ別に整理する際に使用します。

Basic

jui-tabs の最も基本的な使用例です。

Variants

variant プロパティを使用してタブトリガーのビジュアルスタイルを変更できます（solid / bordered / underlined / light）。

Colors

color プロパティを使用してアクティブなタブインジケーターの色（テーマ）を変更できます（brand / success / warning / danger）。

Sizes

size プロパティでタブトリガーの大きさを調整できます（sm / md / lg）。

Full Width

full-width プロパティを有効にすると、タブリスト内のトリガーボタンが均等幅に引き伸ばされます。

関連コンポーネント

• Tab - 個別のタブパネル
• Accordion - アコーディオン
• Breadcrumb - パンくずリスト

アクセシビリティ

• WAI-ARIA:
  • タブリストは role="tablist" として構成され、各タブは role="tab"、各コンテンツパネルは role="tabpanel" として正しく構成されます。
  • 現在アクティブなタブトリガーには aria-selected="true" が動的に設定され、非アクティブなものは aria-selected="false" となります。
  • 各タブトリガーと対応するタブパネルは、aria-controls および aria-labelledby を用いて一意の ID で紐付けられます。
• キーボードナビゲーション:
  • Tab キーで現在のアクティブなタブにフォーカスを移動できます。
  • フォーカスがタブリスト内にある時、ArrowRight / ArrowDown キーで次のタブ、ArrowLeft / ArrowUp キーで前のタブにフォーカスとアクティブ状態を移動させます（ループ移動対応）。
  • Home キーで最初のタブ、End キーで最後のタブにフォーカスを移動します。
  • 無効化状態（disabled）のタブは、キーボードによるフォーカス移動から自動的にスキップされます。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-brand, --jui-color-surface, --jui-radius-md, --jui-spacing-1 等）を参照して描画されます。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
ResizeObserver	タブリスト幅に応じたカーソルの自動位置計算	76+	69+	13.1+	Baseline 2020
::slotted()	スロットされたタブパネルのスタイリング	50+	63+	10+	Baseline 2020
:focus-visible	キーボード操作時のフォーカスリング制御	86+	85+	15.4+	Baseline 2022

💡 すべての機能が主要ブラウザで広く対応済みです。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
ResizeObserver	2020年	2023年後半 ✅
::slotted()	2020年	2023年後半 ✅
:focus-visible	2022年	2024年後半 ✅

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
activeTab	active-tab	アクティブタブの value	string	''
ariaLabel	aria-label	タブリストのアクセシビリティラベル（i18n対応）	string	'Tabs'
color	color	アクティブカラー	"brand" | "danger" | "success" | "warning"	'brand'
fullWidth	full-width	タブ均等幅	boolean	false
size	size	タブサイズ	"lg" | "md" | "sm"	'md'
variant	variant	スタイルバリアント（HeroUI 準拠）	"bordered" | "light" | "solid" | "underlined"	'solid'

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiTabChange	タブ切り替え時に発火	CustomEvent<{ value: string; }>

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	要素を配置（デフォルトスロット）

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"cursor"	アクティブインジケーター（カーソル）
"tab"	各タブトリガー要素
"tablist"	タブリストコンテナ

---

Built with StencilJS