How to set a custom template in Toolbar

04 Sep 20267 minutes to read

The React 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; the string supports plain HTML markup, which is injected into the item. Here, the checkbox is rendered as an HTML template.

template: "<div><input type='checkbox' id='check1' checked='' /><label for='check1'>Accept</label></div>"

As selector

The template property also allows getting template content through a query selector that refers to an element present in the DOM. Here, the checkbox’s 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/35.1.37/tailwind3.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: 'tailwind3_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>