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
HTML
JavaScript
<div id="toolbarContainer"></div>
$(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'
        }]
    });
});
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item
        widget="dxButton"
        location="before"
        [options]="{
            type: 'back',
            text: 'Back'
        }">
    </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 {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule,
        DxButtonModule
    ],
    // ...
})

Note that all data source objects in the code above follow the Default Item Template pattern. This provides a default appearance for toolbar items, which can be customized later.

See Also