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

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

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

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.light.css';
  •  
  • import DxTabPanel, { DxItem } from 'devextreme-vue/tab-panel';
  •  
  • export default {
  • components: {
  • DxTabPanel,
  • DxItem
  • }
  • };
  • </script>
See Also