DevExtreme Angular - Customize Item Appearance

An item in the TabPanel widget 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. In Angular and Vue, you can declare them in the markup. In React, you can use rendering functions (shown in the code below) or components.

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

If you use jQuery, use DOM manipulation methods to combine the HTML markup for TabPanel items. To apply this markup, use the itemTemplate and itemTitleTemplate callback functions as shown in the following code:

You can also customize individual items. In Angular, Vue, and React, declare them using the dxItem component. When using jQuery, you can declare the items as scripts and reference them in the template option or assign a customization function straight to this option.

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
  • ],
  • // ...
  • })

In addition, you can use a 3rd-party template engine to customize widget appearance. For more information, see the 3rd-Party Template Engines article.

See Also