Keyboard Navigation
The keyboard navigation of the ToolBar is always available.
The Toolbar supports the following keyboard shortcuts:
SHORTCUT | DESCRIPTION |
---|---|
TAB or Right Arrow
|
Focuses the next focusable item. |
Shift +TAB or Left
|
Focuses the previous focusable item. |
Enter or Space
|
Presses the focused button. |
Home |
Focuses the first focusable item. |
End |
Focuses last focusable item. |
The ToolBar supports the following keyboard shortcuts which are applied to the SplitButtons or CommandOverflow menus:
SHORTCUT | DESCRIPTION |
---|---|
Alt +Down Arrow
|
Opens the SplitButton or CommandOverflow menu. |
Down |
Focuses the next item in the SplitButton or CommandOverflow menu. |
Up |
Focuses the previous item in the SplitButton or CommandOverflow menu. |
Alt +Up
|
Closes the SplitButton or CommandOverflow menu. |
Esc |
Closes the SplitButton or CommandOverflow menu. |
Enter or Space
|
Presses the focused button. |
<div id="vueapp" class="vue-app">
<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>
Vue.use(ButtonsInstaller);
new Vue({
el: "#vueapp"
})