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
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.