Web Components Tabs (タブ) の概要
Web Components タブは軽量で使いやすいコンポーネントで、対応するコンテンツをタブ形式または通常は水平に配置されたタブのコレクションで整理します。Web Components タブを使用すると、エンドユーザーは簡単にクリックしてさまざまなビューを表示できます。タブの向き、テンプレート、組み込みのヘッダー スタイル、アニメーション、スクロール ボタンなど、いくつかの機能とカスタマイズ オプションがあります。
Ignite UI for Web Components タブは、同様のデータ セットを整理して切り替えます。タブは、データ コンテンツの上部に配置されます。タブが選択されると、対応する ID を持つパネルが表示されます。このコンポーネントは、定義されたタブのみ (パネルなし) で使用できます。
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 panel="first">Tab 1</igc-tab>
<igc-tab panel="second">Tab 2</igc-tab>
<igc-tab panel="third">Tab 3</igc-tab>
<igc-tab-panel id="first">Panel 1</igc-tab-panel>
<igc-tab-panel id="second">Panel 2</igc-tab-panel>
<igc-tab-panel id="third">Panel 3</igc-tab-panel>
</igc-tabs>
選択
ユーザーがキーを押すかクリックして項目を選択すると、IgcTabsComponent
は Change
イベントを発行します。select
メソッドを使用すると、パネルを文字列値として指定してタブを選択できます。
選択したタブが初期の読み込み時に指定されていない場合、無効になっていない最初のタブが選択されます。
ユーザーが矢印キーでナビゲートしているときにタブを選択するデフォルトの動作は、activation
プロパティによって変更できます。Manual
に設定すると、矢印キーを押すと次 / 前のタブにフォーカスしますが、タブは Space または Enter を押した後にのみ選択されます。
無効化されたタブ
disabled
属性を設定すると、タブが無効になります:
<igc-tab panel="first" 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 パーツを公開します。
名前 | 説明 |
---|---|
headers |
タブとスクロール ボタンを含むラッパー。 |
headers-content |
タブの描画に使用できるスペースを表すタブのコンテナー。 |
headers-wrapper |
タブと選択されたインジケーターのラッパー。 |
headers-scroll |
タブのコンテナー。 |
selected-indicator |
選択されたインジケーター。 |
start-scroll-button |
タブがオーバーフローしたときに表示されるスクロール開始ボタン。 |
end-scroll-button |
タブがオーバーフローしたときに表示されるスクロール終了ボタン。 |
content |
データが表示されるコンテンツのコンテナー。 |
IgcTabComponent
コンポーネントは、次の CSS パーツを公開します:
名前 | 説明 |
---|---|
base |
タブ ヘッダーの基本ラッパー。 |
prefix |
プレフィックス ラッパー。 |
suffix |
サフィックス ラッパー。 |
igc-tabs::part(selected-indicator) {
background: #ecaa53;
}
igc-tab::part(base) {
background: #ffe6cc;
}
API リファレンス
IgcTabsComponent
IgcTabComponent
IgcTabPanelComponent
IgcIconComponent
IgcIconButtonComponent
IgcRadioGroupComponent