Vue Tabs - Customize Item Appearance

For a minor customization of tabs, you can define specific fields in item data objects. For example, the following code generates three tabs: the first has an icon, the second has a badge, the third is disabled.

App.vue
  • <template>
  • <DxTabs
  • :items="tabs" />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTabs from "devextreme-vue/tabs";
  •  
  • export default {
  • components: {
  • DxTabs
  • },
  • data() {
  • return {
  • tabs: [
  • { text: "User", icon: 'user' },
  • { text: "Comment", badge: "New" },
  • { text: "Find", disabled: true }
  • ]
  • };
  • }
  • };
  • </script>

If you need a more flexible solution, define an itemTemplate.

App.vue
  • <template>
  • <DxTabs
  • :items="tabs"
  • item-template="item">
  • <template #item="{ data }">
  • <p style="color: #6600cc;">{{data.text}}</p>
  • </template>
  • </DxTabs>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTabs from "devextreme-vue/tabs";
  •  
  • export default {
  • components: {
  • DxTabs
  • },
  • data() {
  • return {
  • tabs: [
  • { text: "User" },
  • { text: "Comment" },
  • { text: "Find" }
  • ]
  • };
  • }
  • };
  • </script>

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

App.vue
  • <template>
  • <DxTabs>
  • <DxItem>
  • <template #default>
  • <span>User</span>
  • </template>
  • </DxItem>
  • <DxItem>
  • <template #default>
  • <span>Comment</span>
  • </template>
  • </DxItem>
  • </DxTabs>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTabs, { DxItem } from "devextreme-vue/tabs";
  •  
  • export default {
  • components: {
  • DxTabs,
  • DxItem
  • }
  • };
  • </script>
See Also