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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.