DevExtreme Vue - Overview

The Toolbar is a widget containing items that usually manage screen content. Those items can be plain text or widgets.

View Demo

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

jQuery
JavaScript
HTML
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [{
            widget: 'dxButton',
            options: {
                type: 'back',
                text: 'Back'
            },
            location: 'before'
        }, {
            text: 'Add',
            locateInMenu: 'always'
        }, {
            text: 'Change',
            locateInMenu: 'always'
        }, {
            text: 'Products',
            location: 'center'
        }]
    });
});
<div id="toolbarContainer"></div>
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item
        widget="dxButton"
        location="before"
        [options]="buttonOptions">
    </dxi-item>
    <dxi-item
        text="Add"
        locateInMenu="always">
    </dxi-item>
    <dxi-item
        text="Change"
        locateInMenu="always">
    </dxi-item>
    <dxi-item
        text="Products"
        location="center">
    </dxi-item>
</dx-toolbar>
import { DxToolbarModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    buttonOptions = {
        type: 'back',
        text: 'Back'
    };
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule,
        DxButtonModule
    ],
    // ...
})
Vue
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>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Toolbar, Item } from 'devextreme-react/toolbar';

const buttonOptions = {
    type: 'back',
    text: 'Back'
};

class App extends React.Component {
    render() {
        return (
            <Toolbar>
                <Item
                    widget="dxButton"
                    location="before"
                    options={buttonOptions}
                />
                <Item
                    text="Add"
                    locateInMenu="always"
                />
                <Item
                    text="Change"
                    locateInMenu="always"
                />
                <Item
                    text="Products"
                    location="center"
                />
            </Toolbar>
        );
    }
}

export default App;

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

See Also