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.common.css';
  • 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. In Angular and Vue, you can declare the templates in the markup. In React, you can use rendering functions (shown in the code below) or components.

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.common.css';
  • 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>

If you use jQuery, use DOM manipulation methods to combine the HTML markup. To apply this markup to toolbar items and commands in the overflow menu, use the itemTemplate and menuItemTemplate callback functions, respectively.

You can also customize an individual toolbar item or menu command. For this purpose, declare a template for this item or command as a script and pass its id to the template or menuItemTemplate property, respectively.

In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the 3rd-Party Template Engines article.

See Also