Blazor Tabs (タブ) の概要
Blazor タブは軽量で使いやすいコンポーネントで、対応するコンテンツをタブ形式または通常は水平に配置されたタブのコレクションで整理します。Blazor タブを使用すると、エンドユーザーは簡単にクリックしてさまざまなビューを表示できます。タブの向き、テンプレート、組み込みのヘッダー スタイル、アニメーション、スクロール ボタンなど、いくつかの機能とカスタマイズ オプションがあります。
Ignite UI for Blazor タブは、同様のデータ セットを整理して切り替えます。タブは、データ コンテンツの上部に配置されます。タブが選択されると、対応する ID を持つパネルが表示されます。このコンポーネントは、定義されたタブのみ (パネルなし) で使用できます。
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 Panel="first">Tab 1</IgbTab>
<IgbTab Panel="second">Tab 2</IgbTab>
<IgbTab Panel="third">Tab 3</IgbTab>
<IgbTabPanel Id="first">Panel 1</IgbTabPanel>
<IgbTabPanel Id="second">Panel 2</IgbTabPanel>
<IgbTabPanel Id="third">Panel 3</IgbTabPanel>
</IgbTabs>
選択
ユーザーがキーを押すかクリックして項目を選択すると、IgbTabs は Change イベントを発行します。Select メソッドを使用すると、パネルを文字列値として指定してタブを選択できます。
選択したタブが初期の読み込み時に指定されていない場合、無効になっていない最初のタブが選択されます。
ユーザーが矢印キーでナビゲートしているときにタブを選択するデフォルトの動作は、Activation プロパティによって変更できます。Manual に設定すると、矢印キーを押すと次 / 前のタブにフォーカスしますが、タブは Space または Enter を押した後にのみ選択されます。
無効化されたタブ
Disabled 属性を設定すると、タブが無効になります:
<IgbTab Panel="first" Disabled>Tab 1</IgbTab>
配置
Alignment プロパティは、Blazor タブの配置方法を制御します。プロパティは以下の値を含みます:
Start(デフォルト): タブの幅はコンテンツ (ラベル、アイコン、両方) に依存し、すべてのタブのパディングは等しくなります。最初のタブは、タブ コンテナーの左側に配置されます。Center: タブの幅はコンテンツによって異なり、タブ コンテナーの中心を占めます。End: タブの幅はコンテンツによって異なり、すべてのタブのパディングは同じです。最後のタブは、タブ コンテナーの右側に配置されます。Justify: すべてのタブは幅が等しく、タブ コンテナーに完全に収まります。
スペースがすべてのタブに収まらない場合は、スクロール ボタンが表示されます。
スクローリング
スクロール ボタンは、利用可能なスペースがすべての Blazor タブを描画するのに十分でない場合に表示されます。最初のタブが表示されている場合、スクロール開始ボタンは無効になります。最後のタブが表示されている場合、スクロール終了ボタンは無効になります。スクロール ボタンの 1 つを押すと、その方向のタブが完全に表示されるようにタブがスクロールされます。または、既に表示されている場合は、その方向の前 / 次のタブが表示されます。
キーボード ナビゲーション
| キー | 説明 |
|---|---|
| ← | 前 (右から左モードでは次) のタブを選択します。Activation が Manual に設定されている場合は、タブのみがフォーカスされます。最初のタブにある場合は最後までスクロールします。 |
| → | 次へ (右から左モードでは前へ) タブを選択します。Activation が Manual に設定されている場合は、タブのみがフォーカスされます。最後のタブにある場合は、スクロールして開始します。 |
| Home | 最初のタブを選択します。 |
| End | 最後のタブを選択します。 |
| Enter / Space | Activation が Manual の場合、フォーカスされたタブを選択します。 |
Prefix / Suffix (プレフィックス / サフィックス)
各タブには、情報を表示するためのデフォルト スロットがあります。アイコン、テキスト、またはその両方と、開始および / または終了に追加のコンテンツを表示するための prefix と suffix のスロットです。
スタイル設定
IgbTabs コンポーネントは、そのすべての要素の CSS パーツを公開します。
| 名前 | 説明 |
|---|---|
headers |
タブとスクロール ボタンを含むラッパー。 |
headers-content |
タブの描画に使用できるスペースを表すタブのコンテナー。 |
headers-wrapper |
タブと選択されたインジケーターのラッパー。 |
headers-scroll |
タブのコンテナー。 |
selected-indicator |
選択されたインジケーター。 |
start-scroll-button |
タブがオーバーフローしたときに表示されるスクロール開始ボタン。 |
end-scroll-button |
タブがオーバーフローしたときに表示されるスクロール終了ボタン。 |
content |
データが表示されるコンテンツのコンテナー。 |
IgbTab コンポーネントは、次の CSS パーツを公開します:
| 名前 | 説明 |
|---|---|
base |
タブ ヘッダーの基本ラッパー。 |
prefix |
プレフィックス ラッパー。 |
suffix |
サフィックス ラッパー。 |
igc-tabs::part(selected-indicator) {
background: #ecaa53;
}
igc-tab::part(base) {
background: #ffe6cc;
}