React Tabs (タブ) の概要

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

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

React タブの例

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

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

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

IgrTabs を使用する前に、次のようにインポートする必要があります:

import { IgrTabs, IgrTab } from "igniteui-react";

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

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

<IgrTabs>
    <IgrTab label="Tab 1">
      <span>Content for tab 1</span>
    </IgrTab>
    <IgrTab label="Tab 2">
      <span>Content for tab 2</span>
    </IgrTab>
    <IgrTab>
      <div slot="label">Tab 3</div>
      <span>Content for tab 3</span>
    </IgrTab>
</IgrTabs>

タブ テキストは、Label プロパティを使用して単純な文字列として設定することも、label スロットに子要素を割り当てることで設定することもできます。デフォルト スロットの残りの子要素は、タブ コンテンツとしてレンダリングされます。

選択

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

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

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

無効化されたタブ

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

<IgrTab label="Tab 1" disabled={true}></IgrTab>

配置

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

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

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

スクローリング

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

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

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

各タブは label スロットでアイコン、テキスト、またはその両方などの情報を表示できるほか、prefix と suffix スロットで開始および / または終了に追加のコンテンツを表示することもできます。

スタイル設定

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

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

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

API リファレンス

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)