React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Template Configuration in React Toolbar component

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.

Source
Preview
index.jsx
index.tsx
index.html
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.

Priority

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.

Button text mode

Class Description
e-popup-text Button Text is only visible in the Popup.
e-toolbar-text Button Text is only visible on the Toolbar.
Source
Preview
index.jsx
index.tsx
index.html
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>
Previous
Next