React Tabs (タブ) の概要

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

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

React タブの例

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

EXAMPLE

TSX

CSS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTabs, IgrTab, IgrIcon, registerIconFromText } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

const home = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
const search = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
registerIconFromText("home", home, "material");
registerIconFromText("search", search, "material");
registerIconFromText("favorite", favorite, "material");

export default class Overview extends React.Component<any, any> {

  constructor(props: any) {
    super(props);
  }

  public render(): JSX.Element {
    return (
      <div className="container sample">
        <IgrTabs>
          <IgrTab>
            <span slot="label"><IgrIcon name='home' collection="material"></IgrIcon></span>
            <span>Home tab panel</span>
          </IgrTab>
          <IgrTab>
             <span slot="label"><IgrIcon name='search' collection="material"></IgrIcon></span>
             <span>Search tab panel</span>
          </IgrTab>
          <IgrTab>
             <span slot="label"><IgrIcon name='favorite' collection="material"></IgrIcon></span>
             <span>Favorite tab panel</span>
          </IgrTab>
        </IgrTabs>
      </div>
    );
  }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Overview/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

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

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

npm install igniteui-react
cmd

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

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

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

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

<IgrTabs>
    <IgrTab label="Tab 1">
      <span>Panel 1</span>
    </IgrTab>
    <IgrTab label="Tab 2">
      <span>Panel 2</span>
    </IgrTab>
    <IgrTab label="Tab 3">
      <span>Panel 3</span>
    </IgrTab>
</IgrTabs>
tsx

選択

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

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

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

無効化されたタブ

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

<IgrTab disabled={true}>Tab 1</IgrTab>
tsx

配置

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

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

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

EXAMPLE

TSX

CSS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTabs, IgrTab, TabsAlignment, IgrRadio, IgrRadioGroup } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

export default class Alignment extends React.Component<any, { alignment: TabsAlignment }> {

  constructor(props) {
    super(props);
    this.state = { alignment: "start" };
  }

  public render(): JSX.Element {
    return (
      <div className="container sample">
        <IgrRadioGroup alignment="horizontal" value={this.state.alignment} onChange={this.onRadioChange}>
            <IgrRadio name="alignment" value="start">Start</IgrRadio>
            <IgrRadio name="alignment" value="center">Center</IgrRadio>
            <IgrRadio name="alignment" value="end">End</IgrRadio>
            <IgrRadio name="alignment" value="justify">Justify</IgrRadio>
        </IgrRadioGroup>
        <IgrTabs alignment={this.state.alignment}>
          <IgrTab label="Basics">
            <span>Basics tab panel</span>
          </IgrTab>
          <IgrTab label="Details">
            <span>Details tab panel</span>
          </IgrTab>
          <IgrTab label="Custom">
            <span>Custom tab panel</span>
          </IgrTab>
          <IgrTab disabled={true} label="Disabled">
            <span>Disabled tab panel will not be displayed</span>
          </IgrTab>
        </IgrTabs>
      </div>
    );
  }

  public onRadioChange = (e: any) => {
    this.setState({ alignment: e.detail.value });
  }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Alignment />);

tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

スクローリング

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

EXAMPLE

TSX

CSS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTabs, IgrTab} from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

export default class Scrolling extends React.Component<any, any> {

  public render(): JSX.Element {
    return (
      <div className="container vertical">
        <IgrTabs key="tabs">
           {Array.from({length: 18}, (_, index) => index + 1).map(number => (
            <IgrTab key={`tab-${number}`}>
              <span slot="label">Tab {number}</span>
              <span>Tab {number} panel</span>
            </IgrTab>
          ))}
        </IgrTabs>
      </div>
    );
  }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Scrolling />);

tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

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

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

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

EXAMPLE

TSX

CSS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTabs, IgrTab, IgrButton, IgrIcon, IgrIconButton, registerIconFromText } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

const home = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
const search = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
 const close = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
registerIconFromText("home", home, "material");
registerIconFromText("search", search, "material");
registerIconFromText("favorite", favorite, "material");
registerIconFromText("close", close, "material");

export default class PrefixSuffix extends React.Component<any, { tabs: string[] }> {

    constructor(props: any) {
        super(props);
        this.state = {
          tabs: ['Home','Search', 'Favorite']
        };
    }

  public render(): JSX.Element {
    return (
      <div className="container sample">
        <IgrTabs>
          {this.state.tabs.map((tab, index) => (
            <IgrTab key={`${tab.toLowerCase()}-tab`}>
                <IgrIcon slot="prefix" name={tab.toLowerCase()} collection="material"></IgrIcon>

                <span slot="label">{tab}</span>

                <IgrIconButton
                  slot="suffix"
                  name="close"
                  collection="material"
                  variant="flat"
                  onClick={() => this.onCloseClicked(index)}
                ></IgrIconButton>

                <span key={`${tab.toLowerCase()}-panel-span`}>{tab} tab panel</span>
            </IgrTab>
          ))}
        </IgrTabs>
        <IgrButton onClick={this.onResetClick}>Reset</IgrButton>
      </div>
    );
  }

  public onCloseClicked = (index: number) => {
    const updatedTabs = [...this.state.tabs];
    updatedTabs.splice(index, 1);
    this.setState({ tabs: updatedTabs }); 
  }

  public onResetClick = () => {
    this.setState({ tabs: ['Home','Search', 'Favorite'] }); 
  }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<PrefixSuffix/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.sample {
    --ig-size: var(--ig-size-small);
}
cssコピー

Edit in: Codesandbox

スタイル設定

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

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

IgrTab コンポーネントは、次の 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

API リファレンス

• IgrTabs
• IgrTab
• IgrIcon
• IgrIconButton
• IgrRadioGroup
• スタイル設定 & テーマ

その他のリソース

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