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.
The following code adds a simple Toolbar to your page. Three items are plain text and one is a Button UI component.
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
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout
- Toolbar - Specify Item Type
- Toolbar - Specify Item Location
- Toolbar - Customize Item Appearance
- Toolbar API Reference
Feedback