Angular 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.js
  • import React from 'react';
  • 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="Change"
  • locateInMenu="always"
  • visible={false}
  • />
  • <Item
  • text="Remove"
  • locateInMenu="always"
  • disabled={true}
  • />
  • <Item
  • text="Products"
  • location="center"
  • />
  • </Toolbar>
  • );
  • }
  • }
  •  
  • export default App;

If you need a more flexible solution, define an itemTemplate and menuItemTemplate to customize toolbar items and commands in the overflow menu, respectively.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Toolbar } from 'devextreme-react/toolbar';
  •  
  • const toolbarItems = [{
  • text: 'Back',
  • location: 'before'
  • }, {
  • text: 'Change',
  • locateInMenu: 'always'
  • }, {
  • text: 'Remove',
  • locateInMenu: 'always'
  • }, {
  • text: 'Products',
  • location: 'center'
  • }];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Toolbar
  • items={toolbarItems}
  • itemRender={this.renderItem}
  • menuItemRender={this.renderMenuItem}
  • />
  • );
  • }
  •  
  • renderItem(data) {
  • return (
  • <b style={{ color: 'green' }}>{data.text}</b>
  • );
  • }
  •  
  • renderMenuItem(data) {
  • return (
  • <b style={{ fontStyle: 'italic' }}>{data.text}</b>
  • );
  • }
  • }
  •  
  • export default App;
See Also