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.
- <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.
- <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>
You can also customize individual items. Declare them using the dxItem component.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.