Set command customization in EJ2 JavaScript Toolbar control

20 Dec 20244 minutes to read

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 the case for the 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’s cssClass property.

ej.base.enableRipple(true);

//Initialize Toolbar component

var toolbar = new ej.navigations.Toolbar({
width: 300,
items: [
    { text: "Bold", type: 'Button', htmlAttributes: { 'class': 'custom_bold', 'id': 'itemId' } },
    { text: "Italic", htmlAttributes: { 'class': 'custom_italic' }  },
    { text: "Underline", htmlAttributes: { 'class': 'custom_underline' } },
    { type: "Separator" },
    { text: "Uppercase", cssClass: "e-txt-casing" }
]
});

//Render initialized Toolbar component
toolbar.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toolbar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet">
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <style>
        .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;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>