Web Components Tabs (タブ) の概要

Web Components タブは軽量で使いやすいコンポーネントで、対応するコンテンツをタブ形式または通常は水平に配置されたタブのコレクションで整理します。Web Components タブを使用すると、エンドユーザーは簡単にクリックしてさまざまなビューを表示できます。タブの向き、テンプレート、組み込みのヘッダー スタイル、アニメーション、スクロール ボタンなど、いくつかの機能とカスタマイズ オプションがあります。

Ignite UI for Web Components タブは、同様のデータ セットを整理して切り替えます。タブは、データ コンテンツの上部に配置されます。タブが選択されると、対応するコンテンツパネルが表示されます。

Web Components タブの例

以下の Web Components タブの例では、3 つの異なるタブが 1 行に並んで表示されているため、それぞれをすばやく簡単に移動できます。

Ignite UI for Web Components でタブを使用する方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents';

defineComponents(IgcTabsComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

単純な IgcTabsComponent の宣言は次のように行われます:

<igc-tabs>
    <igc-tab>
      <div slot="label">Tab 1</div>
      <span>Content for tab 1</span>
    </igc-tab>
    <igc-tab>
      <div slot="label">Tab 2</div>
      <span>Content for tab 2</span>
    </igc-tab>
    <igc-tab>
      <div slot="label">Tab 3</div>
      <span>Content for tab 3</span>
    </igc-tab>
</igc-tabs>

選択

ユーザーがキーを押すかクリックして項目を選択すると、IgcTabsComponent は Change イベントを発行します。select メソッドを使用すると、IgcTabComponent またはその ID を指定してタブを選択できます。

選択したタブが初期の読み込み時に指定されていない場合、無効になっていない最初のタブが選択されます。

ユーザーが矢印キーでナビゲートしているときにタブを選択するデフォルトの動作は、activation プロパティによって変更できます。Manual に設定すると、矢印キーを押すと次 / 前のタブにフォーカスしますが、タブは Space または Enter を押した後にのみ選択されます。

無効化されたタブ

disabled 属性を設定すると、タブが無効になります:

<igc-tab disabled>Tab 1</igc-tab>

配置

alignment プロパティは、Web Components タブの配置方法を制御します。プロパティは以下の値を含みます:

• Start (デフォルト): タブの幅はコンテンツ (ラベル、アイコン、両方) に依存し、すべてのタブのパディングは等しくなります。最初のタブは、タブ コンテナーの左側に配置されます。
• Center: タブの幅はコンテンツによって異なり、タブ コンテナーの中心を占めます。
• End: タブの幅はコンテンツによって異なり、すべてのタブのパディングは同じです。最後のタブは、タブ コンテナーの右側に配置されます。
• Justify: すべてのタブは幅が等しく、タブ コンテナーに完全に収まります。

スペースがすべてのタブに収まらない場合は、スクロール ボタンが表示されます。

スクローリング

スクロール ボタンは、利用可能なスペースがすべての Web Components タブを描画するのに十分でない場合に表示されます。最初のタブが表示されている場合、スクロール開始ボタンは無効になります。最後のタブが表示されている場合、スクロール終了ボタンは無効になります。スクロール ボタンの 1 つを押すと、その方向のタブが完全に表示されるようにタブがスクロールされます。または、既に表示されている場合は、その方向の前 / 次のタブが表示されます。

キーボード ナビゲーション

キー	説明
←	前 (右から左モードでは次) のタブを選択します。activation が Manual に設定されている場合は、タブのみがフォーカスされます。最初のタブにある場合は最後までスクロールします。
→	次へ (右から左モードでは前へ) タブを選択します。activation が Manual に設定されている場合は、タブのみがフォーカスされます。最後のタブにある場合は、スクロールして開始します。
Home	最初のタブを選択します。
End	最後のタブを選択します。
Enter / Space	activation が Manual の場合、フォーカスされたタブを選択します。

Prefix / Suffix (プレフィックス / サフィックス)

各タブには、情報を表示するためのデフォルト スロットがあります。アイコン、テキスト、またはその両方と、開始および / または終了に追加のコンテンツを表示するための prefix と suffix のスロットです。

スタイル設定

IgcTabsComponent コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

名前	説明
selected-indicator	選択されたインジケーター。
start-scroll-button	タブがオーバーフローしたときに表示されるスクロール開始ボタン。
end-scroll-button	タブがオーバーフローしたときに表示されるスクロール終了ボタン。

IgcTabComponent コンポーネントは、次の CSS パーツを公開します:

名前	説明
content	タブ ヘッダーのラベル スロット コンテナー。
prefix	タブ ヘッダーのラベル プレフィックス。
suffix	タブ ヘッダーのラベル サフィックス。
tab-header	単一のタブのヘッダー。
tab-body	単一のタブの本体コンテンツを保持します。選択したタブの本体のみが表示されます。

igc-tab::part(tab-header) {
  background-color: var(--ig-gray-200);
}

igc-tab::part(content) {
  color: var(--ig-success-500);
}

API リファレンス

• IgcTabsComponent
• IgcTabComponent
• IgcIconComponent
• IgcIconButtonComponent
• IgcRadioGroupComponent
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)