Item Configuration in React Toolbar component

The Toolbar can be rendered by defining an array of items. Items can be constructed with the following built-in command types or item template.

Button

Button is the default command type, and it can be rendered by using the text property. Properties of the button command type:

Property	Description
`text`	The text to be displayed for button.
`id`	The ID of the button to be rendered. If the ID is not given, auto ID is generated.
`prefixIcon`	Defines the class used to specify an icon for the button. The icon is `positioned before` the text if text is available or the icon alone button is rendered.
`suffixIcon`	Defines the class used to specify an icon for the button. The icon is `positioned after` the text if text is available. If both `prefixIcon` and `suffixIcon` are specified, only `prefixIcon` is considered.
`width`	Used to set the `width` of the button.
`align`	Specifies the location for aligning Toolbar items.

Separator

The Separator type adds a vertical separation between the Toolbar single/multiple commands.

Source

Preview

index.jsx

index.tsx

index.html

import { ItemDirective, ItemsDirective, 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>
        <ItemsDirective>
          <ItemDirective text="Cut"/>
          <ItemDirective text="Copy"/>
          <ItemDirective type="Separator"/>
          <ItemDirective text="Paste"/>
          <ItemDirective type="Separator"/>
          <ItemDirective text="Undo"/>
          <ItemDirective text="Redo"/>
        </ItemsDirective>
      </ToolbarComponent>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));

import { ItemDirective, ItemsDirective, 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 >
        <ItemsDirective>
          <ItemDirective text="Cut" />
          <ItemDirective text="Copy" />
          <ItemDirective type="Separator" />
          <ItemDirective text="Paste" />
          <ItemDirective type="Separator" />
          <ItemDirective text="Undo" />
          <ItemDirective text="Redo" />
        </ItemsDirective>
      </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>

If Separator is added as first or last item, it is not visible.

Input

The Input type is only applicable for adding template elements when the template property is defined as an object. Input type creates an input element internally that acts as the container for Syncfusion input based components.

NumericTextBox

E.g. The following code explains about how to add NumericTextBox component to the Toolbar.

The NumericTextBox component can be included by importing the NumericTextBox module from ej2-inputs.
Initialize the NumericTextBox in template property, in which the Toolbar item type set as Input.
Related NumericTextBox component properties are also can be configured like as below.

new NumericTextBox( { format: 'c2' }))

DropDownList

E.g. The following code explains about how to add DropDownList component to the Toolbar.

The DropDownList component can be included by importing the DropDownList module from ej2-dropdowns.
Initialize the DropDownList in template property, in which the Toolbar item type set as Input.
Related DropDownList component properties are also can be configured like as below.

new DropDownList({ width:100 })

CheckBox

E.g. The following code explains about how to add CheckBox component to the Toolbar.

The CheckBox component can be included by importing the CheckBox module from ej2-buttons.
Initialize the CheckBox in template property, in which the Toolbar item type set as Input.
Related CheckBox component properties are also can be configured like as below.

new CheckBox({ label: 'Checkbox', checked: true })

RadioButton

E.g. The following code explains about how to add RadioButton component to the Toolbar.

The RadioButton component can be included by importing the RadioButton module from ej2-buttons.
Initialize the RadioButton in template property, in which the Toolbar item type set as Input.
Related RadioButton component properties are also can be configured like as below.

new RadioButton({ label: 'Radio', name: 'default', checked: true })

Above steps applicable for all ‘Syncfusion’ input based components.