How To

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
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:100%;">
        <br>
         <ejs-toolbar >
           <e-items>
             <e-item text='Bold'  :htmlAttributes = 'boldAttribute'></e-item>
             <e-item text='Italic' :htmlAttributes = 'italicAttribute'></e-item>
             <e-item text='Underline' :htmlAttributes = 'underAttribute'></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Uppercase' cssClass = 'e-txt-casing'></e-item>
          </e-items>
    </ejs-toolbar>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(ToolbarPlugin);

export default {

name: 'app',


   data() {
  return {
      boldAttribute: { 'class': 'custom_bold', 'id': 'itemId' }
      italicAttribute :{ 'class': 'custom_italic' }
      underAttribute : { 'class': 'custom_underline' }
   }
   }
}
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";

.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-undo-icon:before {
    content: "\e76e"
}

.e-redo-icon:before {
    content: "\e726"
}

.e-cut-icon:before {
    content: "\e759"
}

.e-copy-icon:before {
    content: "\e70a"
}

.e-paste-icon:before {
    content: "\e77e"
}

.e-color-icon:before {
    content: "\e778"
}

.e-bold-icon:before {
    content: "\e71c"
}

.e-underline-icon:before {
    content: "\e75a"
}

.e-alignleft-icon:before {
    content: "\e75e"
}

.e-alignright-icon:before {
    content: "\e75f"
}

.e-aligncenter-icon:before {
    content: "\e74b"
}

.e-alignjustify-icon:before {
    content: "\e756"
}

.e-upload-icon:before {
    content: "\e725"
}

.e-download-icon:before {
    content: "\e824"
}

.e-indent-icon:before {
    content: "\e742"
}

.e-outdent-icon:before {
    content: "\e746"
}

.e-clear-icon:before {
    content: "\e760"
}

.e-reload-icon:before {
    content: "\e837"
}

.e-export-icon:before {
    content: "\e7fb"
}

.e-italic-icon:before {
    content: "\e709"
}

.e-bullets-icon:before {
    content: "\e75c"
}

.e-numbering-icon:before {
    content: "\e733"
}

.e-ascending-icon:before {
    content: "\e73f"
}

.e-descending-icon:before {
    content: "\e79d"
}

.e-zoomin-icon:before {
    content: "\e7d8"
}

.e-zoomout-icon:before {
    content: "\e7ea"
}
</style>

Set Essential JS 2 Tooltip to the commands

The tooltipText property of the Toolbar item is used to set the HTML Tooltip to the commands that can be viewed as hint texts on mouse hover.

To change the tooltipText to ej2-tooltip component:

  • Import the Tooltip module from ej2-popups,and initialize the Tooltip with the Toolbar target. Refer to the following code example:
Source
Preview
app.vue
<template>
  <div id="app">
    <div id = 'Tooltip'  id ='Toolbar' :created="oncreated">
         <ejs-toolbar >
    <e-items>
             <e-item text='Cut'></e-item>
             <e-item text='Copy'></e-item>
             <e-item text='Paste'></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Bold'></e-item>
             <e-item text='Italic'></e-item>
             <e-item text='Underline'></e-item>
          </e-items>
    </ejs-toolbar>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
import { Tooltip } from "@syncfusion/ej2-popups";
Vue.use(ToolbarPlugin);

export default {
  name: 'app',
   data() {
    },
    methods:{
      oncreated: function(e){
      var tooltip  = new Tooltip({ target: '#Toolbar',content: 'This is Toolbar'});
       tooltip.appendTo('#Tooltip');
      }
    }
}
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>

Set item-wise custom template

The 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 a string

The HTML element tag can be given as a string for the template property. Here, the checkbox is rendered as a HTML template.

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

As a selector

The template property also allows getting template content through query selector. Here, checkbox ‘ID’ attribute is specified in the template.

template: "#Template"
Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:100%;">
        <br>
         <ejs-toolbar >
    <e-items>
             <e-item text='Cut'></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Paste'></e-item>
             <e-item type='Separator'></e-item>
             <e-item :template='templateEle'></e-item>
             <e-item text='Undo'></e-item>
             <e-item text='Redo'></e-item>
             <e-item :template='templateEleId'></e-item>
          </e-items>
    </ejs-toolbar>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(ToolbarPlugin);

export default {
  name: 'app',
  data () {
  return {
    templateEle: '<input placeholder="Search" style="height:27px;"/>';
    templateEleId: '#Template';
}
}
}
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>

Add Toggle Button

Toolbar supports to add a toggle Button by using the template property. Refer below steps

  • By using Toolbar template property, pass required HTML String to render toggle button.
   <e-item template='<button class="e-btn" id="media_btn"></button>'></e-item>
  • Now render the toggle Button into the targeted element in Toolbar created event handler and bind click event for it. On clicking the toggle Button, change the required icon and content based on current active state.
Source
Preview
app.vue
<template>
  <div id="app">
        <br>
         <ejs-toolbar id="toolbar" class="toggle" :created='create'>
    <e-items>
             <e-item template='<button class="e-btn" id="media_btn"></button>'></e-item>
                <e-item type='Separator'></e-item>
                <e-item template='<button class="e-btn" id="zoom_btn"></button>'></e-item>
                <e-item type='Separator'></e-item>
                <e-item template='<button class="e-btn" id="undo_btn"></button>'></e-item>
                <e-item type='Separator'></e-item>
                <e-item template='<button class="e-btn" id="filter_btn"></button>'></e-item>
                <e-item type='Separator'></e-item>
                <e-item template='<button class="e-btn" id="visible_btn"></button>'></e-item>
          </e-items>
    </ejs-toolbar>
    <br/>
        <div id="content">
          This content will be hidden, when you click on hide button and toggle get an active state as show, otherwise it will be visible.
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
import { Button} from "@syncfusion/ej2-buttons";
Vue.use(ToolbarPlugin);

export default {
  name: 'app',
  data () {

}
  methods: {
    create: function(args) {
     var zoomBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-zoomin-icon', isToggle: true });
    zoomBtn.appendTo('#zoom_btn');

    var mediaBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-play-icon', isToggle: true });
    mediaBtn.appendTo('#media_btn');

    var undoBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-undo-icon', isToggle: true });
    undoBtn.appendTo('#undo_btn');

    var filterBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-filter-icon', isToggle: true });
    filterBtn.appendTo('#filter_btn');

    var visibleBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-hide-icon', isToggle: true, content:'Hide'});
    visibleBtn.appendTo('#visible_btn');


    //Toggle button click event handlers
    zoomBtn.element.onclick = (): void => {
        if (zoomBtn.element.classList.contains('e-active')) {
            zoomBtn.iconCss = 'e-icons e-zoomout-icon';
        } else {
            zoomBtn.iconCss = 'e-icons e-zoomin-icon';
        }
    };

    mediaBtn.element.onclick = (): void => {
        if (mediaBtn.element.classList.contains('e-active')) {
            mediaBtn.iconCss = 'e-icons e-pause-icon';
        } else {
            mediaBtn.iconCss = 'e-icons e-play-icon';
        }
    };

    undoBtn.element.onclick = (): void => {
        if (undoBtn.element.classList.contains('e-active')) {
            undoBtn.iconCss = 'e-icons e-redo-icon';
        } else {
            undoBtn.iconCss = 'e-icons e-undo-icon';
        }
    };

    filterBtn.element.onclick = (): void => {
        if (filterBtn.element.classList.contains('e-active')) {
            filterBtn.iconCss = 'e-icons e-filternone-icon';
        } else {
            filterBtn.iconCss = 'e-icons e-filter-icon';
        }
    };

    visibleBtn.element.onclick = (): void => {
        if (visibleBtn.element.classList.contains('e-active')) {
            document.getElementById('content').style.display = 'none';
            visibleBtn.content = 'Show';
            visibleBtn.iconCss = 'e-icons e-show-icon';
        } else {
            document.getElementById('content').style.display = 'block';
            visibleBtn.content = 'Hide';
            visibleBtn.iconCss = 'e-icons e-hide-icon';
        }
    };
}
  }
}
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";

@font-face {
    font-family: 'toolbar';
    src:
    url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.e-toolbar.toggle .e-btn .e-icons {
    font-family: 'toolbar' !important;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.e-hide-icon::before {
    content: '\a701';
}

.e-show-icon::before {
    content: '\a700';
}

.e-filter-icon::before {
    content: '\a709';
}

.e-filternone-icon::before {
    content: '\a708';
}

.e-undo-icon::before {
    content: '\a706';
}

.e-redo-icon::before {
    content: '\a707';
}

.e-play-icon::before {
    content: '\a704';
}

.e-pause-icon::before {
    content: '\a705';
}

.e-zoomin-icon::before {
    content: '\a702';
}

.e-zoomout-icon::before {
    content: '\a703';
}
</style>

How to customize toolbar scrollStep

Toolbar supports to customize the scrolling distance when you click the left and right side navigation icons. Through beforeCreate event we can customize scrollStep property for scrolling distance. Please Refer below steps

  • By using Toolbar scrollStep property, pass a required value to customize toolbar scrollStep.
    beforeCreate: function(args) {
        args.scrollStep = 50;
   }
  • Now customize the scrollStep value in Toolbar beforeCreate event handler.
Source
Preview
app.vue
<template>
  <div id="app">
        <br>
        <ejs-toolbar id="toolbar" width="600" :beforeCreate='beforeCreate'>
            <e-items>
                <e-item prefixIcon='e-cut-icon tb-icons' tooltipText='Cut'></e-item>
                <e-item prefixIcon='e-copy-icon tb-icons' tooltipText='Copy'></e-item>
                <e-item prefixIcon='e-paste-icon tb-icons' tooltipText='Paste'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-bold-icon tb-icons' tooltipText='Bold'></e-item>
                <e-item prefixIcon='e-underline-icon tb-icons' tooltipText='Underline'></e-item>
                <e-item prefixIcon='e-italic-icon tb-icons' tooltipText='Italic'></e-item>
                <e-item prefixIcon='e-color-icon tb-icons' tooltipText='Color-Picker'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-alignleft-icon tb-icons' tooltipText='Align-Left'></e-item>
                <e-item prefixIcon='e-alignright-icon tb-icons' tooltipText='Align-Right'></e-item>
                <e-item prefixIcon='e-aligncenter-icon tb-icons' tooltipText='Align-Center'></e-item>
                <e-item prefixIcon='e-alignjustify-icon tb-icons' tooltipText='Align-Justify'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-bullets-icon tb-icons' tooltipText='Bullets'></e-item>
                <e-item prefixIcon='e-numbering-icon tb-icons' tooltipText='Numbering'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-ascending-icon tb-icons' tooltipText='Ascending'></e-item>
                <e-item prefixIcon='e-descending-icon tb-icons' tooltipText='Descending'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-upload-icon tb-icons' tooltipText='Upload'></e-item>
                <e-item prefixIcon='e-download-icon tb-icons' tooltipText='Download'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-indent-icon tb-icons' tooltipText='Indent'></e-item>
                <e-item prefixIcon='e-outdent-icon tb-icons' tooltipText='Outdent'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-clear-icon tb-icons' tooltipText='Clear'></e-item>
                <e-item prefixIcon='e-reload-icon tb-icons' tooltipText='Reload'></e-item>
                <e-item prefixIcon='e-export-icon tb-icons' tooltipText='Export'></e-item>
            </e-items>
        </ejs-toolbar>
        <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
    <br/>
    </div>
</template>
<script>
import Vue from 'vue';
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(ToolbarPlugin);

export default {
  name: 'app',
  data () {

}
  methods: {
    beforeCreate: function(args) {
        args.scrollStep = 50;
}
  }
}
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";

.e-tbar-btn .e-icons {
    font-family: 'Material_toolbar';
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

@media only screen and (min-width: 1224px) {
    .e-tbar-section .e-sample-resize-container {
        width: 700px;
    }
}

@media only screen and (min-width: 1824px) {
    .e-tbar-section .e-sample-resize-container {
        width: 50%;
    }
}

.e-tbar-section .e-sample-resize-container {
    margin: auto;
    height: 40px;
    max-width: 700px;
}

.material .e-bigger .e-toolbar .e-tbar-btn .e-icons {
    font-size: 18px;
}

.material .e-toolbar .e-tbar-btn .e-icons {
    font-size: 16px;
}
</style>