All Components

ToolBar Overview

The ToolBar holds various controls such as buttons, groups of buttons, toggle buttons, split buttons, and other customized elements.

The ToolBar wrapper for Vue is a client-side wrapper for the Kendo UI ToolBar widget.

Basic Usage

The following example demonstrates the ToolBar in action.

<div id="vueapp" class="vue-app">
    <div class="col-xs-12 col-sm-12 example-col">
        <kendo-toolbar>
            <kendo-toolbar-item type="button" text="Button"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Toggle Button" :togglable="true"></kendo-toolbar-item>
            <kendo-toolbar-item type="splitButton" text="Insert" :menu-buttons="[
                { text: 'Insert above', icon: 'insert-up' },
                { text: 'Insert between', icon: 'insert-middle' },
                { text: 'Insert below', icon: 'insert-down' }]">
            </kendo-toolbar-item>
            <kendo-toolbar-item type="separator"></kendo-toolbar-item>
            <kendo-toolbar-item type="buttonGroup" :buttons="[
                { icon: 'align-left', text: 'Left', togglable: true, group: 'text-align' },
                { icon: 'align-center', text: 'Center', togglable: true, group: 'text-align' },
                { icon: 'align-right', text: 'Right', togglable: true, group: 'text-align' }]">
            </kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Action" overflow="always"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Another Action" overflow="always"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Something else here" overflow="always"></kendo-toolbar-item>
        </kendo-toolbar>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp"
})

Functionality and Features

Events

The following example demonstrates basic ToolBar events. You can subscribe to all ToolBar events by the handler name.

<div id="vueapp" class="vue-app">
    <div class="col-xs-12 col-sm-12 example-col">
        <kendo-toolbar @click="onClick"
                       @close="onClose"
                       @open="onOpen"
                       @toggle="onToggle"
                       @overflowClose="onOverflowClose"
                       @overflowOpen="onOverflowOpen">
            <kendo-toolbar-item type="button" text="Button"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Toggle Button" :togglable="true"></kendo-toolbar-item>
            <kendo-toolbar-item type="splitButton" text="Insert" :menu-buttons="[
                { text: 'Insert above', icon: 'insert-up' },
                { text: 'Insert between', icon: 'insert-middle' },
                { text: 'Insert below', icon: 'insert-down' }]">
            </kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Action" overflow="always"></kendo-toolbar-item>
        </kendo-toolbar>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp",
    methods: {
        onClick: function (e) {
            console.log("Event :: click");
        },
        onClose: function (e) {
            console.log("Event :: close");
        },
        onOpen: function (e) {
            console.log("Event :: open");
        },
        onToggle: function (e) {
            console.log("Event :: toggle");
        },
        onOverflowClose: function (e) {
            console.log("Event :: overflow close");
        },
        onOverflowOpen: function (e) {
            console.log("Event :: overflow open");
        }
    }
})
In this article