React Tabs Overview
The React Tabs is a lightweight and user-friendly component that organizes corresponding content in a tab format or a collection of tabs typically placed horizontally. The React Tab enables end-users to easily click through and display different views. There are several features and customization options like tab orientation, templating, built-in header styles, animation, scroll buttons, and more.
The Ignite UI for React Tabs organizes and switches between similar data sets. The tabs are placed at the top of the data content. When a tab is selected the panel with the corresponding id is displayed. The component could be used with only tabs defined (without any panels).
React Tabs Example
The React Tabs example below displays three different tabs aligned in a single line so you can navigate across each in a fast and easy way.
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" );
}
}
const root = ReactDOM.createRoot (document.getElementById("root" ));
root.render (<Overview /> );
tsx コピー
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
How to use Tabs with Ignite UI for React
First, you need to the install the corresponding Ignite UI for React npm package by running the following command:
npm install igniteui-react
cmd
Before using the IgrTabs
, you need to register it as follows:
import { IgrTabsModule, IgrTabs, IgrTab, IgrTabPanel} from "igniteui-react" ;
IgrTabsModule.register();
tsx
For a complete introduction to the Ignite UI for React, read the Getting Started topic.
Simple IgrTabs
declaration is done as follows:
<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
Selection
The IgrTabs
emits Change
event when the user selects an item either by key press or click. The select
method allows you to select a tab by specifying its panel as string value.
If the selected tab is not specified on initial load, the first tab that is not disabled will be selected.
The default behavior, which selects a tab when the user is navigating with the arrow keys, could be modified by the activation
property. Setting it to Manual
will focus the next/previous tab on arrow key press, but the tab will be selected only after pressing Space or Enter
Disabled Tab
A tab is disabled by setting the disabled
attribute:
<IgrTab panel ="first" disabled ={true} > Tab 1 </IgrTab >
tsx
Alignment
The alignment
property controls how React tabs are positioned. It accepts the following values:
Start
(default): the width of the tab depends on the content (label, icon, both) and all tabs have equal padding. First tab is aligned to the tabs container's left side.
Center
: the width of the tab depends on the content and occupies the tabs container's center.
End
: the width of the tab depends on the content and all tabs have equal padding. Last tab is aligned to the tabs container's right side.
Justify
: all tabs are equal in width and fully fit the tabs container.
If the space is not enough to fit all tabs, scroll buttons are displayed.
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;
}
}
const root = ReactDOM.createRoot (document.getElementById("root" ));
root.render (<Alignment /> );
tsx コピー
Scroll buttons are shown when the available space is not enough to render all React tabs. The start scroll button is disabled if the first tab is in view. Respectively, when last tab is in view the end scroll button is disabled. By pressing one of the scroll buttons the tabs are scrolled so the tab in that direction is fully visible, or if it is already visible the previous/next tab in that direction is displayed.
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;
}
}
const root = ReactDOM.createRoot (document.getElementById("root" ));
root.render (<Scrolling /> );
tsx コピー
Keyboard Navigation
Keys
Description
←
Selects previous (next in Right-to-Left mode) tab. If activation
is set to Manual
only focuses the tab. Scrolls to end if on first tab.
→
Selects next (previous in Right-to-Left mode) tab. If activation
is set to Manual
only focuses the tab. Scrolls to start if on last tab.
Home
Selects the first tab.
End
Selects the last tab.
Enter / Space
Selects the focused tab when activation
is Manual
Prefix / Suffix
Each tab has default slot to display information - icon, text or both and prefix
and suffix
slots to show additional content in the beginning and/or in the end.
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 });
}
}
const root = ReactDOM.createRoot (document.getElementById("root" ));
root.render (<PrefixSuffix /> );
tsx コピー
.sample {
--ig-size: var (--ig-size-small);
}
css コピー
Styling
The IgrTabs
component exposes CSS parts for all of its elements:
Name
Description
headers
The wrapper which includes the tabs and the scroll buttons.
headers-content
The container for the tabs which represents the available space for rendering of the tabs.
headers-wrapper
The wrapper for the tabs and the selected indicator.
headers-scroll
The container for the tabs.
selected-indicator
The selected indicator.
start-scroll-button
The start scroll button displayed when the tabs overflow.
end-scroll-button
The end scroll button displayed when the tabs overflow.
content
The container for the content where the data is displayed.
The IgrTab
component exposes the following CSS parts:
Name
Description
base
The base wrapper of the tab header.
prefix
The prefix wrapper.
suffix
The suffix wrapper.
igc-tabs::part (selected-indicator) {
background : #ecaa53 ;
}
igc-tab::part (base) {
background : #ffe6cc ;
}
css
API Reference
Additional Resources