Toolbar supports to add a toggle Button by using the template
property. Refer below steps
<ItemDirective template='<button class="e-btn" id="media_btn"></button>' />
created
event handler and bind click event for it.
On clicking the toggle Button, change the required icon and content based on current active state.import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { Button } from '@syncfusion/ej2-react-buttons';
function ReactApp() {
let undoBtn;
let zoomBtn;
let mediaBtn;
let filterBtn;
let visibleBtn;
const tbCreated = () => {
zoomBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-zoomin-icon', isToggle: true });
zoomBtn.appendTo('#zoom_btn');
mediaBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-play-icon', isToggle: true });
mediaBtn.appendTo('#media_btn');
undoBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-undo-icon', isToggle: true });
undoBtn.appendTo('#undo_btn');
filterBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-filter-icon', isToggle: true });
filterBtn.appendTo('#filter_btn');
visibleBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-hide-icon', isToggle: true, content: 'Hide' });
visibleBtn.appendTo('#visible_btn');
//Toggle button click event handlers
zoomBtn.element.onclick = () => {
if (zoomBtn.element.classList.contains('e-active')) {
zoomBtn.iconCss = 'e-icons e-zoomout-icon';
}
else {
zoomBtn.iconCss = 'e-icons e-zoomin-icon';
}
};
mediaBtn.element.onclick = () => {
if (mediaBtn.element.classList.contains('e-active')) {
mediaBtn.iconCss = 'e-icons e-pause-icon';
}
else {
mediaBtn.iconCss = 'e-icons e-play-icon';
}
};
undoBtn.element.onclick = () => {
if (undoBtn.element.classList.contains('e-active')) {
undoBtn.iconCss = 'e-icons e-redo-icon';
}
else {
undoBtn.iconCss = 'e-icons e-undo-icon';
}
};
filterBtn.element.onclick = () => {
if (filterBtn.element.classList.contains('e-active')) {
filterBtn.iconCss = 'e-icons e-filternone-icon';
}
else {
filterBtn.iconCss = 'e-icons e-filter-icon';
}
};
visibleBtn.element.onclick = () => {
if (visibleBtn.element.classList.contains('e-active')) {
document.getElementById('content').style.display = 'none';
visibleBtn.content = 'Show';
visibleBtn.iconCss = 'e-icons e-show-icon';
}
else {
document.getElementById('content').style.display = 'block';
visibleBtn.content = 'Hide';
visibleBtn.iconCss = 'e-icons e-hide-icon';
}
};
};
const divMargin = { margin: '25px 0' };
return (<div className='control-pane'>
<div className='control-section tbar-control-section'>
<div className='control toolbar-sample tbar-sample' style={divMargin}>
<ToolbarComponent id="ej2Toolbar" created={tbCreated}>
<ItemsDirective>
<ItemDirective template='<button class="e-btn" id="media_btn"></button>'/>
<ItemDirective type='Separator'/>
<ItemDirective template='<button class="e-btn" id="zoom_btn"></button>'/>
<ItemDirective type='Separator'/>
<ItemDirective template='<button class="e-btn" id="undo_btn"></button>'/>
<ItemDirective type='Separator'/>
<ItemDirective template='<button class="e-btn" id="filter_btn"></button>'/>
<ItemDirective type='Separator'/>
<ItemDirective template='<button class="e-btn" id="visible_btn"></button>'/>
</ItemsDirective>
</ToolbarComponent>
</div>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id="container">
<div id="toolbar" class="toggle">
<div id="loader">LOADING....</div>
</div>
<br />
<div id="content">
This content will be hidden, when you click on hide button and toggle
get an active state as show, otherwise it will be visible.
</div>
</div>
</body>
</html>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { Button } from '@syncfusion/ej2-react-buttons';
function ReactApp() {
let undoBtn: any;
let zoomBtn: any;
let mediaBtn: any;
let filterBtn: any;
let visibleBtn: any;
const tbCreated = (): void => {
zoomBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-zoomin-icon', isToggle: true });
zoomBtn.appendTo('#zoom_btn');
mediaBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-play-icon', isToggle: true });
mediaBtn.appendTo('#media_btn');
undoBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-undo-icon', isToggle: true });
undoBtn.appendTo('#undo_btn');
filterBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-filter-icon', isToggle: true });
filterBtn.appendTo('#filter_btn');
visibleBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-hide-icon', isToggle: true, content: 'Hide' });
visibleBtn.appendTo('#visible_btn');
//Toggle button click event handlers
zoomBtn.element.onclick = (): void => {
if (zoomBtn.element.classList.contains('e-active')) {
zoomBtn.iconCss = 'e-icons e-zoomout-icon';
} else {
zoomBtn.iconCss = 'e-icons e-zoomin-icon';
}
};
mediaBtn.element.onclick = (): void => {
if (mediaBtn.element.classList.contains('e-active')) {
mediaBtn.iconCss = 'e-icons e-pause-icon';
} else {
mediaBtn.iconCss = 'e-icons e-play-icon';
}
};
undoBtn.element.onclick = (): void => {
if (undoBtn.element.classList.contains('e-active')) {
undoBtn.iconCss = 'e-icons e-redo-icon';
} else {
undoBtn.iconCss = 'e-icons e-undo-icon';
}
};
filterBtn.element.onclick = (): void => {
if (filterBtn.element.classList.contains('e-active')) {
filterBtn.iconCss = 'e-icons e-filternone-icon';
} else {
filterBtn.iconCss = 'e-icons e-filter-icon';
}
};
visibleBtn.element.onclick = (): void => {
if (visibleBtn.element.classList.contains('e-active')) {
(document.getElementById('content') as HTMLElement).style.display = 'none';
visibleBtn.content = 'Show';
visibleBtn.iconCss = 'e-icons e-show-icon';
} else {
(document.getElementById('content') as HTMLElement).style.display = 'block';
visibleBtn.content = 'Hide';
visibleBtn.iconCss = 'e-icons e-hide-icon';
}
};
}
const divMargin = { margin: '25px 0' };
return (
<div className='control-pane'>
<div className='control-section tbar-control-section'>
<div className='control toolbar-sample tbar-sample' style={divMargin}>
<ToolbarComponent id="ej2Toolbar" created={tbCreated}>
<ItemsDirective>
<ItemDirective template='<button class="e-btn" id="media_btn"></button>' />
<ItemDirective type='Separator' />
<ItemDirective template='<button class="e-btn" id="zoom_btn"></button>' />
<ItemDirective type='Separator' />
<ItemDirective template='<button class="e-btn" id="undo_btn"></button>' />
<ItemDirective type='Separator' />
<ItemDirective template='<button class="e-btn" id="filter_btn"></button>' />
<ItemDirective type='Separator' />
<ItemDirective template='<button class="e-btn" id="visible_btn"></button>' />
</ItemsDirective>
</ToolbarComponent>
</div>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);