Set item wise custom template in React Toolbar component
30 Jan 20237 minutes to read
The Toolbar supports adding template commands using the template
property. Template property can be given as the HTML element
that is either a string
or a query selector
.
As string
The HTML element tag can be given as a string for the template property. Here, the checkbox is rendered as a HTML template.
template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"
As selector
The template property also allows getting template content through query selector
. Here, checkbox ‘ID’ attribute is specified in the template.
template: "#Template"
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const buttonTemplate = () => {
return (<div>
<ButtonComponent content="Template"></ButtonComponent>
</div>)
}
const ReactApp = () => {
return (
<ToolbarComponent >
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective type="Separator" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective template="<div><input type='checkbox' id='check1' checked=''>Accept</input></div>" />
<ItemDirective text="Undo" />
<ItemDirective text="Redo" />
<ItemDirective template={buttonTemplate} />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const buttonTemplate = () => {
return (<div>
<ButtonComponent content="Template"></ButtonComponent>
</div>)
}
const ReactApp = () => {
return (
<ToolbarComponent >
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective type="Separator" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective template="<div><input type='checkbox' id='check1' checked=''>Accept</input></div>" />
<ItemDirective text="Undo" />
<ItemDirective text="Redo" />
<ItemDirective template={buttonTemplate} />
</ItemsDirective>
</ToolbarComponent>
);
}
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="https://cdn.syncfusion.com/ej2/27.2.2/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>