Vue Toolbar - Customize Item Appearance

For a minor customization of Toolbar items, you can define specific fields in item data objects. For example, the following code generates four toolbar items: the first is a UI component, the second is hidden, the third is disabled, the fourth is relocated.

App.vue
  • <template>
  • <DxToolbar>
  • <DxItem
  • widget="dxButton"
  • location="before"
  • :options="buttonOptions"
  • />
  • <DxItem
  • text="Change"
  • locate-in-menu="always"
  • :visible="false"
  • />
  • <DxItem
  • text="Remove"
  • locate-in-menu="always"
  • :disabled="true"
  • />
  • <DxItem
  • text="Products"
  • location="center"
  • />
  • </DxToolbar>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxToolbar, { DxItem } from 'devextreme-vue/toolbar';
  •  
  • export default {
  • components: {
  • DxToolbar,
  • DxItem
  • },
  • data() {
  • return {
  • buttonOptions: {
  • type: 'back',
  • text: 'Back'
  • }
  • }
  • }
  • };
  • </script>

If you need a more flexible solution, define an itemTemplate and menuItemTemplate to customize toolbar items and commands in the overflow menu, respectively.

App.vue
  • <template>
  • <DxToolbar
  • :items="toolbarItems"
  • item-template="itemTemplate"
  • menu-item-template="menuItemTemplate">
  • <template #itemTemplate="{ data }">
  • <b style="color: green;">{{data.text}}</b>
  • </template>
  • <template #menuItemTemplate="{ data }">
  • <b style="font-style: italic;">{{data.text}}</b>
  • </template>
  • </DxToolbar>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxToolbar from 'devextreme-vue/toolbar';
  •  
  • export default {
  • components: {
  • DxToolbar
  • },
  • data() {
  • return {
  • toolbarItems: [{
  • text: 'Back',
  • location: 'before'
  • }, {
  • text: 'Change',
  • locateInMenu: 'always'
  • }, {
  • text: 'Remove',
  • locateInMenu: 'always'
  • }, {
  • text: 'Products',
  • location: 'center'
  • }]
  • };
  • }
  • };
  • </script>
See Also