Blazor Tabs (タブ) の概要
Blazor タブは軽量で使いやすいコンポーネントで、対応するコンテンツをタブ形式または通常は水平に配置されたタブのコレクションで整理します。Blazor タブを使用すると、エンドユーザーは簡単にクリックしてさまざまなビューを表示できます。タブの向き、テンプレート、組み込みのヘッダー スタイル、アニメーション、スクロール ボタンなど、いくつかの機能とカスタマイズ オプションがあります。
Ignite UI for Blazor タブは、同様のデータ セットを整理して切り替えます。タブは、データ コンテンツの上部に配置されます。タブが選択されると、対応するコンテンツパネルが表示されます。
Blazor タブの例
以下の Blazor タブの例では、3 つの異なるタブが 1 行に並んで表示されているため、それぞれをすばやく簡単に移動できます。
Ignite UI for Blazor でタブを使用する方法
IgbTabs を使用する前に、次のようにインポートする必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule));
Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。
単純な IgbTabs の宣言は次のように行われます:
<IgbTabs>
<IgbTab Label="Tab 1">
<span>Content for tab 1</span>
</IgbTab>
<IgbTab Label="Tab 2">
<span>Content for tab 2</span>
</IgbTab>
<IgbTab>
<div slot="label">Tab 3</div>
<span>Content for tab 3</span>
</IgbTab>
</IgbTabs>
タブ テキストは、Label プロパティを使用して単純な文字列として設定することも、label スロットに子要素を割り当てることで設定することもできます。デフォルト スロットの残りの子要素は、タブ コンテンツとしてレンダリングされます。
選択
ユーザーがキーを押すかクリックして項目を選択すると、IgbTabs は Change イベントを発行します。Select メソッドを使用すると、IgbTab またはその ID を指定してタブを選択できます。
選択したタブが初期の読み込み時に指定されていない場合、無効になっていない最初のタブが選択されます。
ユーザーが矢印キーでナビゲートしているときにタブを選択するデフォルトの動作は、Activation プロパティによって変更できます。Manual に設定すると、矢印キーを押すと次 / 前のタブにフォーカスしますが、タブは SPACE または ENTER を押した後にのみ選択されます。
無効化されたタブ
Disabled 属性を設定すると、タブが無効になります:
<IgbTab Label="Tab 1" Disabled></IgbTab>
配置
Alignment プロパティは、Blazor タブの配置方法を制御します。プロパティは以下の値を含みます:
Start(デフォルト): タブの幅はコンテンツ (ラベル、アイコン、両方) に依存し、すべてのタブのパディングは等しくなります。最初のタブは、タブ コンテナーの左側に配置されます。Center: タブの幅はコンテンツによって異なり、タブ コンテナーの中心を占めます。End: タブの幅はコンテンツによって異なり、すべてのタブのパディングは同じです。最後のタブは、タブ コンテナーの右側に配置されます。Justify: すべてのタブは幅が等しく、タブ コンテナーに完全に収まります。
スペースがすべてのタブに収まらない場合は、スクロール ボタンが表示されます。
スクローリング
スクロール ボタンは、利用可能なスペースがすべての Blazor タブを描画するのに十分でない場合に表示されます。最初のタブが表示されている場合、スクロール開始ボタンは無効になります。最後のタブが表示されている場合、スクロール終了ボタンは無効になります。スクロール ボタンの 1 つを押すと、その方向のタブが完全に表示されるようにタブがスクロールされます。または、既に表示されている場合は、その方向の前 / 次のタブが表示されます。
キーボード ナビゲーション
| キー | 説明 |
|---|---|
| ← | 前 (右から左モードでは次) のタブを選択します。Activation が Manual に設定されている場合は、タブのみがフォーカスされます。最初のタブにある場合は最後までスクロールします。 |
| → | 次へ (右から左モードでは前へ) タブを選択します。Activation が Manual に設定されている場合は、タブのみがフォーカスされます。最後のタブにある場合は、スクロールして開始します。 |
| HOME | 最初のタブを選択します。 |
| END | 最後のタブを選択します。 |
| ENTER / SPACE | Activation が Manual の場合、フォーカスされたタブを選択します。 |
Prefix / Suffix (プレフィックス / サフィックス)
各タブは label スロットでアイコン、テキスト、またはその両方などの情報を表示できるほか、prefix と suffix スロットで開始および / または終了に追加のコンテンツを表示することもできます。
スタイル設定
IgbTabs コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。
| 名前 | 説明 |
|---|---|
headers |
タブとスクロール ボタンを含むラッパー。 |
headers-content |
タブの描画に使用できるスペースを表すタブのコンテナー。 |
headers-wrapper |
タブと選択されたインジケーターのラッパー。 |
headers-scroll |
タブのコンテナー。 |
selected-indicator |
選択されたインジケーター。 |
start-scroll-button |
タブがオーバーフローしたときに表示されるスクロール開始ボタン。 |
end-scroll-button |
タブがオーバーフローしたときに表示されるスクロール終了ボタン。 |
content |
データが表示されるコンテンツのコンテナー。 |
IgbTab コンポーネントは、次の CSS パーツを公開します:
| 名前 | 説明 |
|---|---|
content |
コンテンツのラッパー。 |
prefix |
プレフィックス ラッパー。 |
suffix |
サフィックス ラッパー。 |
igc-tab::part(tab-header),
igc-tabs::part(inner)::after {
--item-background: var(--ig-surface-600);
--border-color: var(--ig-success-300);
}
igc-tab::part(tab-body),
igc-tab[selected] igc-icon {
--item-active-icon-color: var(--ig-success-300);
}
igc-tab:not([selected]) igc-icon {
--item-icon-color: var(--ig-gray-500);
}
igc-tabs::part(start-scroll-button),
igc-tabs::part(end-scroll-button) {
--background: var(--ig-surface-600);
--hover-background: var(--ig-surface-700);
--active-background: var(--ig-surface-700);
--disabled-background: var(--ig-gray-100);
--button-color: var(--ig-gray-700);
--button-hover-color: var(--ig-gray-800);
--button-disabled-color: var(--ig-gray-300);
--border-color: var(--ig-surface-600);
}
igc-tab::part(tab-header) {
--item-hover-color: var(--ig-success-500);
}
igc-tab::part(tab-header)::before {
--border-color--hover: var(--ig-gray-500);
}