Web Components Tabs (タブ)

    Ignite UI for Web Components タブは、同様のデータ セットを整理して切り替えます。タブは、データ コンテンツの上部に配置されます。タブが選択されると、対応する ID を持つパネルが表示されます。このコンポーネントは、定義されたタブのみ (パネルなし) で使用できます。

    Web Components タブの例

    使用方法

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

    npm install igniteui-webcomponents
    
    import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcTabsComponent);
    

    単純な 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>
    

    選択

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

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

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

    無効化されたタブ

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

    <igc-tab panel="first" disabled>Tab 1</igc-tab>
    

    配置

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

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

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

    スクローリング

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

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

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

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

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

    スタイル設定

    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 リファレンス

    使用したその他のコンポーネントとディレクティブ:

    その他のリソース