Interface for a class Item
Event triggers when click
the toolbar item.
string
Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the align
property.
Possible values are:
Right: To align commands to the right side of the Toolbar.
<div id="element"> </div>
let toolbar: Toolbar = new Toolbar({
items: [
{ text: "Home" },
{ text: "My Home Page" , align: 'Center' },
{ text: "Search", align: 'Right' }
{ text: "Settings", align: 'Right' }
]
});
toolbar.appendTo('#element');
string
Defines single/multiple classes (separated by space) to be used for customization of commands.
boolean
Specifies whether an item should be disabled or not.
Object
Defines htmlAttributes used to add custom attributes to Toolbar command. Supports HTML attributes such as style, class, etc.
string
Specifies the unique ID to be used with button or input element of Toolbar items.
string
Specifies the Toolbar command display area when an element’s content is too large to fit available space.
This is applicable only to popup
mode. Possible values are:
string
Defines single/multiple classes separated by space used to specify an icon for the button. The icon will be positioned before the text content if text is available, otherwise the icon alone will be rendered.
boolean
Defines the priority of items to display it in popup always. It allows to maintain toolbar item on popup always but it does not work for toolbar priority items.
string
Specifies where the button text will be displayed on popup mode of the Toolbar. Possible values are:
string
Defines single/multiple classes separated by space used to specify an icon for the button. The icon will be positioned after the text content if text is available.
number
Specifies the tab order of the Toolbar items. When positive values assigned, it allows to switch focus to the next/previous toolbar items with Tab/ShiftTab keys. By default, user can able to switch between items only via arrow keys. If the value is set to 0 for all tool bar items, then tab switches based on element order.
string
| Object
Specifies the HTML element/element ID as a string that can be added as a Toolbar command.
E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]
string
Specifies the text to be displayed on the Toolbar button.
string
Specifies the text to be displayed on hovering the Toolbar button.
string
Specifies the types of command to be rendered in the Toolbar. Supported types are:
boolean
Specifies whether an item should be hidden or not.
number
| string
Specifies the width of the Toolbar button commands.