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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.