Search results

Set command customization

The htmlAttributes property of the Toolbar item is used to set the HTML attributes (‘ID’, ‘class’, ‘style’ ,‘role’) for the commands.

When style attributes are added, if the same attributes were already present, they will be replaced. This is not so in the case of class attribute. Classes will be added to the element instead of replacing the existing ones.

Single or multiple CSS classes can be added to the Toolbar commands using the Toolbar item cssClass property.

Source
Preview
index.jsx
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
class ReactApp extends React.Component {
    render() {
        let boldAttribute = {
            'class': 'custom_bold', 'id': 'itemId'
        };
        let italicAttribute = { 'class': 'custom_italic' };
        let underAttribute = { 'class': 'custom_underline' };
        return (<ToolbarComponent width="300">
            <ItemsDirective>
              <ItemDirective text="Bold" htmlAttributes={boldAttribute}/>
              <ItemDirective text="Italic" htmlAttributes={italicAttribute}/>
              <ItemDirective text="Underline" htmlAttributes={underAttribute}/>
              <ItemDirective type="Separator"/>
              <ItemDirective text="Uppercase" cssClass="e-txt-casing"/>
            </ItemsDirective>
           </ToolbarComponent>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';

class ReactApp extends React.Component<{}, {}> {
  render() {
        let boldAttribute: any = {
          'class': 'custom_bold', 'id': 'itemId'
        };
        let italicAttribute: any = { 'class': 'custom_italic' };
        let underAttribute: any = { 'class': 'custom_underline' };
        return (
           <ToolbarComponent width="300" >
            <ItemsDirective>
              <ItemDirective text="Bold" htmlAttributes={boldAttribute}  />
              <ItemDirective text="Italic" htmlAttributes={italicAttribute}/>
              <ItemDirective text="Underline" htmlAttributes={underAttribute}/>
              <ItemDirective type="Separator"/>
              <ItemDirective text="Uppercase" cssClass="e-txt-casing"  />
            </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>