The Toolbar can be rendered by item based collection and by HTML elements. To render it based on the given HTML element, use id
as the target
property. To render the Toolbar, follow the below structure of the HTML elements:
<div id='template_toolbar'> --> Root Toolbar Element
<div> --> Toolbar Items Container
<div> --> Toolbar Item Element
</div>
</div>
</div>
Here, the template ID, #template_toolbar
is directly appended to the Toolbar.
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class ReactApp extends React.Component {
render() {
return (<ToolbarComponent>
<div id='template_toolbar'>
<div> <button className="e-btn e-tbar-btn">Cut</button> </div>
<div> <button className="e-btn e-tbar-btn">Copy</button> </div>
<div> <button className="e-btn e-tbar-btn">Paste</button> </div>
<div className="e-separator"/>
<div> <button className="e-btn e-tbar-btn">Bold</button> </div>
<div> <button className="e-btn e-tbar-btn">Italic</button> </div>
</div>
</ToolbarComponent>);
}
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class ReactApp extends React.Component<{}, {}> {
public render() {
return (
<ToolbarComponent>
<div id='template_toolbar'>
<div> <button className="e-btn e-tbar-btn">Cut</button> </div>
<div> <button className="e-btn e-tbar-btn">Copy</button> </div>
<div> <button className="e-btn e-tbar-btn">Paste</button> </div>
<div className="e-separator" />
<div> <button className="e-btn e-tbar-btn">Bold</button> </div>
<div> <button className="e-btn e-tbar-btn">Italic</button> </div>
</div>
</ToolbarComponent>
);
}
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));
<!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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Popup
is one of the supported responsive modes of the Toolbar. The Toolbar commands, popup mode priority and button text mode
customizations are
achieved in the item based rendering through property declaration. For more information on popup mode, refer here
The above behavior can also be achieved with template rendering by defining equivalent class
names instead of property declaration.
Equivalent class names listed below are needed to add the Toolbar items’ div
element.
Class | Description |
---|---|
e-overflow-show | Commands are always displayed on the Toolbar with primary priority. |
e-overflow-hide | Commands are always displayed in the popup with secondary priority. |
Class | Description |
---|---|
e-popup-text | Button Text is only visible in the Popup . |
e-toolbar-text | Button Text is only visible on the Toolbar . |
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class ReactApp extends React.Component {
render() {
return (<ToolbarComponent width="300" overflowMode="Popup">
<div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-cut-icon e-icons e-btn-icon"/><div className="e-tbar-btn-text">Cut</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-copy-icon e-icons e-btn-icon"/><div className="e-tbar-btn-text">Copy</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-paste-icon e-icons e-btn-icon"/><div className="e-tbar-btn-text">Paste</div></button> </div>
<div className="e-separator"/>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-bold-icon e-icons e-btn-icon"/><div className="e-tbar-btn-text">Bold</div></button> </div>
<div className="e-overflow-hide e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-underline-icon e-icons e-btn-icon"/><div className="e-tbar-btn-text">Underline</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-italic-icon e-icons e-btn-icon"/><div className="e-tbar-btn-text">Italic</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-ascending-icon e-icons e-btn-icon"/><div className="e-tbar-btn-text">A-Z Sort</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-descending-icon e-icons e-btn-icon"/><div className="e-tbar-btn-text">Z-A Sort</div></button> </div>
</div>
</ToolbarComponent>);
}
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class ReactApp extends React.Component<{}, {}> {
public render() {
return (
<ToolbarComponent width="300" overflowMode="Popup">
<div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-cut-icon e-icons e-btn-icon" /><div className="e-tbar-btn-text">Cut</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-copy-icon e-icons e-btn-icon" /><div className="e-tbar-btn-text">Copy</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-paste-icon e-icons e-btn-icon" /><div className="e-tbar-btn-text">Paste</div></button> </div>
<div className="e-separator" />
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-bold-icon e-icons e-btn-icon" /><div className="e-tbar-btn-text">Bold</div></button> </div>
<div className="e-overflow-hide e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-underline-icon e-icons e-btn-icon" /><div className="e-tbar-btn-text">Underline</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-italic-icon e-icons e-btn-icon" /><div className="e-tbar-btn-text">Italic</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-ascending-icon e-icons e-btn-icon" /><div className="e-tbar-btn-text">A-Z Sort</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-btn e-tbar-btn"><span className="e-descending-icon e-icons e-btn-icon" /><div className="e-tbar-btn-text">Z-A Sort</div></button> </div>
</div>
</ToolbarComponent>
);
}
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));
<!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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>