React TabPanel - Customize Item Appearance

An item in the TabPanel UI component includes a tab and a view. For a minor customization of TabPanel items, you can define specific fields in item data objects. For example, the following code generates three items: the first has a badge, the second is disabled, the third has an icon.

HTML
TypeScript
  • <dx-tab-panel
  • [items]="tabPanelItems">
  • </dx-tab-panel>
  • import { DxTabPanelModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • tabPanelItems = [{
  • title: 'Info',
  • text: 'This is Info Tab',
  • badge: 'New'
  • }, {
  • title: 'Contacts',
  • text: 'This is Contacts Tab',
  • disabled: true
  • }, {
  • title: 'Address',
  • text: 'This is Address Tab',
  • icon: 'home'
  • }];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTabPanelModule
  • ],
  • // ...
  • })

If you need a more flexible solution, define itemTemplate and itemTitleTemplate for views and tabs, respectively.

HTML
TypeScript
  • <dx-tab-panel
  • [items]="tabPanelItems"
  • itemTitleTemplate="title"
  • itemTemplate="item">
  • <div *dxTemplate="let content of 'title'">
  • <p>{{content.title}}</p>
  • </div>
  • <div *dxTemplate="let content of 'item'">
  • <div style="margin: 25px;">
  • <h1>{{content.title}}</h1>
  • <div style="text-align: left;">
  • <p *ngFor="let key of getItemKeys(content.data)">
  • {{key}}: <b>{{content.data[key]}}</b>
  • </p>
  • </div>
  • </div>
  • </div>
  • </dx-tab-panel>
  • import { DxTabPanelModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • tabPanelItems = [{
  • title: 'Info',
  • data: { firstName: 'John', lastName: 'Smith', birthYear: 1986 }
  • }, {
  • title: 'Contacts',
  • data: { phone: '(555)555-5555', email: 'John.Smith@example.com' }
  • }];
  • getItemKeys (item) {
  • return Object.keys(item);
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTabPanelModule
  • ],
  • // ...
  • })

View Demo

You can also customize individual items. Declare them using the dxItem component.

HTML
TypeScript
  • <dx-tab-panel>
  • <dxi-item title="Info">
  • <p>This is Info Tab</p>
  • </dxi-item>
  • <dxi-item title="Contacts">
  • <p>This is Contacts Tab</p>
  • </dxi-item>
  • </dx-tab-panel>
  • import { DxTabPanelModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTabPanelModule
  • ],
  • // ...
  • })
See Also