React Tabs (タブ) の概要

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

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

React タブの例

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

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

IgrTabsModule.register();
IgrIconModule.register();

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

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


  public render(): JSX.Element {
    return (
      <div className="container sample">        
        <IgrTabs key="tabs">
          <IgrTab panel="home" key="home-tab">
            <span key="home-icon"><IgrIcon ref={this.iconRef} name='home' collection="material"></IgrIcon></span>            
          </IgrTab>
          <IgrTab panel="search" key="search-tab">
             <span key="search-icon"><IgrIcon ref={this.iconRef} name='search' collection="material"></IgrIcon></span>           
          </IgrTab>
          <IgrTab panel="favorite" key="favorite-tab">
             <span key="favorite-icon"><IgrIcon ref={this.iconRef} name='favorite' collection="material"></IgrIcon></span>            
          </IgrTab>
           <IgrTabPanel id="home" key="basics-panel"><span key="home-panel">Home tab panel</span></IgrTabPanel>
          <IgrTabPanel id="search" key="search-panel"><span key="search-panel">Search tab panel</span></IgrTabPanel>
          <IgrTabPanel id="favorite" key="favorite-panel"><span key="favorite-panel">Favorite tab panel</span></IgrTabPanel>        
        </IgrTabs>
      </div>
    );
  }

  public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }
       
        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>';
        icon.registerIconFromText("home", home, "material");
        icon.registerIconFromText("search", search, "material");
        icon.registerIconFromText("favorite", favorite, "material");
        
    }

}

// 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

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

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

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

npm install igniteui-react
cmd

IgrTabs を使用する前に、次のように登録する必要があります:

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

IgrTabsModule.register();
tsx

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

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

<IgrTabs>
    <IgrTab panel="first">Tab 1</IgrTab>
    <IgrTab panel="second">Tab 2</IgrTab>
    <IgrTab panel="third">Tab 3</IgrTab>
    <IgrTabPanel id="first">Panel 1</IgrTabPanel>
    <IgrTabPanel id="second">Panel 2</IgrTabPanel>
    <IgrTabPanel id="third">Panel 3</IgrTabPanel>
</IgrTabs>
tsx

選択

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

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

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

無効化されたタブ

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

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

配置

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

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

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

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

IgrTabsModule.register();
IgrRadioModule.register();
IgrRadioGroupModule.register();

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

    private tabs: IgrTabs
    private tabsRef(r: IgrTabs) {
        this.tabs = r;
        this.setState({});
    }

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

        this.tabsRef = this.tabsRef.bind(this);
        this.onRadioChange = this.onRadioChange.bind(this);
    }


  public render(): JSX.Element {
    return (
      <div className="container sample">
        <IgrRadioGroup alignment="horizontal" key="radio-group" >
            <IgrRadio name="alignment" value="start" checked={true} key="start" change={this.onRadioChange}><span key="radio-span-0">Start</span></IgrRadio>
            <IgrRadio name="alignment" value="center" key="center" change={this.onRadioChange}><span key="radio-span-1">Center</span></IgrRadio>
            <IgrRadio name="alignment" value="end" key="end" change={this.onRadioChange}><span key="radio-span-2">End</span></IgrRadio>
            <IgrRadio name="alignment" value="justify" key="justify" change={this.onRadioChange}><span key="radio-span-3">Justify</span></IgrRadio>
        </IgrRadioGroup>
        <IgrTabs ref={this.tabsRef} key="tabs">
          <IgrTab panel="basics" key="basics-tab">
            <span key="basics-tab-span">Basics</span>
          </IgrTab>
          <IgrTab panel="details" key="details-tab">
            <span key="details-tab-span">Details</span>
          </IgrTab>
          <IgrTab panel="custom" key="custom-tab">
            <span key="custom-tab-span">Custom</span>
          </IgrTab>
          <IgrTab panel="disabled" disabled={true} key="disabled-tab">
            <span key="disabled-tab-span">Disabled</span>
          </IgrTab>
           <IgrTabPanel id="basics" key="basics-panel"><span key="basics-panel-span">Basics tab panel</span></IgrTabPanel>
          <IgrTabPanel id="details" key="details-panel"><span key="details-panel-span">Details tab panel</span></IgrTabPanel>
          <IgrTabPanel id="custom" key="custom-panel"><span key="custom-panel-span">Custom tab panel</span></IgrTabPanel>
          <IgrTabPanel id="disabled" key="disabled-panel"><span key="disabled-panel-span">Disabled tab panel will not be displayed</span></IgrTabPanel>
        </IgrTabs>
      </div>
    );
  }

  public onRadioChange(e: any) {
       this.tabs.alignment = e.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

スクローリング

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

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

IgrTabsModule.register();

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

    private tabs: IgrTabs
    private tabsRef(r: IgrTabs) {
        this.tabs = r;
        this.setState({});
    }

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

        this.tabsRef = this.tabsRef.bind(this);
        this.onRadioChange = this.onRadioChange.bind(this);
    }


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

  public onRadioChange(e: any) {
       this.tabs.alignment = e.value;      
    }
}

// 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

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

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

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

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

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

IgrTabsModule.register();
IgrIconModule.register();
IgrIconButtonModule.register();

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

  private tabs: IgrTabs
    private tabsRef(r: IgrTabs) {
        this.tabs = r;
        this.setState({});
    }    

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

        this.tabsRef = this.tabsRef.bind(this);
        this.onCloseClicked = this.onCloseClicked.bind(this);

         this.state = {
          tabs: ['Home','Search', 'Favorite']
        };
    }

  public render(): JSX.Element {
    return (
      <div className="container sample">        
        <IgrTabs key="tabs" ref={this.tabsRef}>
          {this.state.tabs.map((tab:string, index:number) => (
                        <IgrTab panel={tab.toLowerCase()} key={`${tab.toLowerCase()}-tab`}>
                            <span key={`${tab.toLowerCase()}-icon-span`} slot="prefix"><IgrIcon ref={this.iconRef} name={tab.toLowerCase()} collection="material"></IgrIcon></span>
                            <span key={`${tab.toLowerCase()}-span`}>{tab}</span>
                            <span key={`${tab.toLowerCase()}-iconButton-span`} slot="suffix"><IgrIconButton name='close' collection="material" variant="flat" clicked={() => this.onCloseClicked(index)}></IgrIconButton></span>
                        </IgrTab>
                    ))}
                    {this.state.tabs.map((tab:string) => (
                        <IgrTabPanel id={tab.toLowerCase()} key={`${tab.toLowerCase()}-panel`}><span key={`${tab.toLowerCase()}-panel-span`}>{tab} tab panel</span></IgrTabPanel>
                    ))}
        </IgrTabs>
      </div>
    );
  }

  public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }
       
        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>';
        icon.registerIconFromText("home", home, "material");
        icon.registerIconFromText("search", search, "material");
        icon.registerIconFromText("favorite", favorite, "material");
        icon.registerIconFromText("close", close, "material");        
    }

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

}

// 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

スタイル設定

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

名前	説明
`headers`	タブとスクロールボタンを含むラッパー。
`headers-content`	タブの描画に使用できるスペースを表すタブのコンテナー。
`headers-wrapper`	タブと選択されたインジケーターのラッパー。
`headers-scroll`	タブのコンテナー。
`selected-indicator`	選択されたインジケーター。
`start-scroll-button`	タブがオーバーフローしたときに表示されるスクロール開始ボタン。
`end-scroll-button`	タブがオーバーフローしたときに表示されるスクロール終了ボタン。
`content`	データが表示されるコンテンツのコンテナー。

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

名前	説明
`content`	コンテンツのラッパー。
`prefix`	プレフィックスラッパー。
`suffix`	サフィックスラッパー。

igc-tabs::part(headers-content) {
  background-color: var(--ig-gray-200);
}

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

React Tabs (タブ) の概要

React タブの例

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

選択

無効化されたタブ

配置

スクローリング

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

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

スタイル設定

API リファレンス

その他のリソース

React Tabs (タブ) の概要

React タブの例

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

選択

無効化されたタブ

配置

スクローリング

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

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

スタイル設定

API リファレンス

その他のリソース

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