Web Components Tabs (タブ) の概要

    Web Components タブは軽量で使いやすいコンポーネントで、対応するコンテンツをタブ形式または通常は水平に配置されたタブのコレクションで整理します。Web Components タブを使用すると、エンドユーザーは簡単にクリックしてさまざまなビューを表示できます。タブの向き、テンプレート、組み込みのヘッダー スタイル、アニメーション、スクロール ボタンなど、いくつかの機能とカスタマイズ オプションがあります。

    Ignite UI for Web Components タブは、同様のデータ セットを整理して切り替えます。タブは、データ コンテンツの上部に配置されます。タブが選択されると、対応するコンテンツパネルが表示されます。

    Web Components タブの例

    以下の Web Components タブの例では、3 つの異なるタブが 1 行に並んで表示されているため、それぞれをすばやく簡単に移動できます。

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    Ignite UI for Web Components でタブを使用する方法

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

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

defineComponents(IgcTabsComponent);
ts

    Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

    単純な IgcTabsComponent の宣言は次のように行われます:

    <igc-tabs>
    <igc-tab>
      <div slot="label">Tab 1</div>
      <span>Content for tab 1</span>
    </igc-tab>
    <igc-tab>
      <div slot="label">Tab 2</div>
      <span>Content for tab 2</span>
    </igc-tab>
    <igc-tab>
      <div slot="label">Tab 3</div>
      <span>Content for tab 3</span>
    </igc-tab>
</igc-tabs>
html

    選択

    ユーザーがキーを押すかクリックして項目を選択すると、IgcTabsComponent は Change イベントを発行します。select メソッドを使用すると、IgcTabComponent またはその ID を指定してタブを選択できます。

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

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

    無効化されたタブ

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

    <igc-tab disabled>Tab 1</igc-tab>
html

    配置

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

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    スクローリング

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

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

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    スタイル設定

    IgcTabsComponent コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

    名前 説明
    selected-indicator 選択されたインジケーター。
    start-scroll-button タブがオーバーフローしたときに表示されるスクロール開始ボタン。
    end-scroll-button タブがオーバーフローしたときに表示されるスクロール終了ボタン。

    IgcTabComponent コンポーネントは、次の CSS パーツを公開します:

    名前 説明
    content タブ ヘッダーのラベル スロット コンテナー。
    prefix タブ ヘッダーのラベル プレフィックス。
    suffix タブ ヘッダーのラベル サフィックス。
    tab-header 単一のタブのヘッダー。
    tab-body 単一のタブの本体コンテンツを保持します。選択したタブの本体のみが表示されます。 
    igc-tab::part(tab-header) {
  background-color: var(--ig-gray-200);
}

igc-tab::part(content) {
  color: var(--ig-success-500);
}
css

    EXAMPLE
    TS
    HTML
    index.css
    TabsStyle.css
    Edit in:

    API リファレンス

    その他のリソース