Vue 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.

App.vue
  • <template>
  • <DxTabPanel
  • :items="tabPanelItems" />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTabPanel from 'devextreme-vue/tab-panel';
  •  
  • export default {
  • components: {
  • DxTabPanel
  • },
  • data() {
  • return {
  • 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'
  • }]
  • };
  • }
  • };
  • </script>

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.

App.vue
  • <template>
  • <DxTabPanel
  • :items="tabPanelItems"
  • item-title-template="title"
  • item-template="item">
  • <template #title="{ data }">
  • <div>
  • <p>{{ data.title }}</p>
  • </div>
  • </template>
  • <template #item="{ data }">
  • <div :style="{ margin: '25px' }">
  • <h1>{{data.title}}</h1>
  • <div :style="{ textAlign: 'left' }">
  • <p v-for="key in getItemKeys(data.data)">
  • {{key}}: <b>{{data.data[key]}}</b>
  • </p>
  • </div>
  • </div>
  • </template>
  • </DxTabPanel>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTabPanel from 'devextreme-vue/tab-panel';
  •  
  • export default {
  • components: {
  • DxTabPanel
  • },
  • data() {
  • return {
  • tabPanelItems: [{
  • title: 'Info',
  • data: { firstName: 'John', lastName: 'Smith', birthYear: 1986 }
  • }, {
  • title: 'Contacts',
  • data: { phone: '(555)555-5555', email: 'John.Smith@example.com' }
  • }]
  • };
  • },
  • methods: {
  • getItemKeys: function(item) {
  • return Object.keys(item);
  • }
  • }
  • };
  • </script>

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 property or assign a customization function straight to this property.

App.vue
  • <template>
  • <DxTabPanel>
  • <DxItem title="Info">
  • <template #default>
  • <p>This is Info Tab</p>
  • </template>
  • </DxItem>
  • <DxItem title="Contacts">
  • <template #default>
  • <p>This is Contacts Tab</p>
  • </template>
  • </DxItem>
  • </DxTabPanel>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTabPanel, { DxItem } from 'devextreme-vue/tab-panel';
  •  
  • export default {
  • components: {
  • DxTabPanel,
  • DxItem
  • }
  • };
  • </script>

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

See Also