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.
- <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.
- <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
- ],
- // ...
- })
You can also customize individual items. Declare them using the dxItem component.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.