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>
    

    選択

    ユーザーがキーを押すかクリックして項目を選択すると、IgbTabsChange イベントを発行します。Select メソッドを使用すると、パネルを文字列値として指定してタブを選択できます。

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

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

    無効化されたタブ

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

    <IgbTab Panel="first" Disabled>Tab 1</IgbTab>
    

    配置

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

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

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

    スクローリング

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

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

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

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

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

    スタイル設定

    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;
    }
    

    API リファレンス

    その他のリソース