Tab

タブコンテナ内の個別のタブパネルを定義するコンポーネント。jui-tabs と組み合わせて使用します。

Basic

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

これは通常のタブコンテンツです。
このタブは無効化されています。
 アイコン付きタブ
slot="tab-content" を用いて、タブトリガーボタンの内部にカスタム HTML（アイコン＋テキストなど）を配置した例です。

関連コンポーネント

  • Tabs - タブコンテナ

ブラウザ対応

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

機能用途ChromeFirefoxSafariステータス
:focus-visibleフォーカス制御86+85+15.4+Baseline 2022
::slotted()スロット要素の配置53+63+10+Baseline 2020
CSS 変数 (var())デザイントークン適用49+31+9.1+Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

Baseline 情報

機能Baseline 達成Widely Available 予定
:focus-visible2022年2024年後半 ✅
::slotted()2020年2022年後半 ✅
CSS 変数2017年2020年前半 ✅

アクセシビリティ

  • WAI-ARIA: jui-tabs 親コンポーネントと連動し、自身は role="tabpanel" として動作します。
  • キーボードナビゲーション:
    • jui-tabs からのフォーカス・キーボード操作（矢印キー、Home, End）によりパネルが切り替わります。
    • disabled が指定されたタブは、キーボードナビゲーションおよびフォーカス移動から自動的にスキップされます。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。親の jui-tabs またはグローバルのデザイントークンを参照してください。

プロパティ

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

PropertyAttributeDescriptionTypeDefault
activeactiveアクティブ状態（親から設定される）booleanfalse
disableddisabled無効状態booleanfalse
labellabelタブラベルstring''
value (required)valueタブ識別子（必須）stringundefined

スロット

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

SlotDescription
パネルコンテンツ（デフォルトスロット）
"tab-content"タブトリガー内のカスタムコンテンツ

シャドウパーツ

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

PartDescription
"panel"パネルコンテナ

Built with StencilJS