JavaScript/jQuery Toolbar - Overview

The Toolbar is a UI component containing items that usually manage screen content. Those items can be plain text or UI components.

View Demo

The following code adds a simple Toolbar to your page. Three items are plain text and one is a Button UI component.

App.vue
  • <template>
  • <DxToolbar>
  • <DxItem
  • widget="dxButton"
  • location="before"
  • :options="buttonOptions"
  • />
  • <DxItem
  • text="Add"
  • locate-in-menu="always"
  • />
  • <DxItem
  • text="Change"
  • locate-in-menu="always"
  • />
  • <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>

Note that field names in these data source items are conventional. This provides a default tile appearance, which can be customized later.

See Also