This is a simple button that can have an icon. Button can have two states and a badge with a number, which can be useful for displaying the number of new messages, etc.
Related sample: Toolbar. Buttons
A button can be easily added to a toolbar with the help of the add() method of Tree Collection:
toolbar.data.add({
type:"button", value:"Best button"
});
You can provide the following attributes in the configuration object of a button:
type | (string) the type of a control, set it to "button". If not specified - the "navItem" type is applied by default. |
id | (string) the id of a control, auto-generated if not set |
parent | (string) the parent of the block |
value | (string) a value of the button. You need to set either the value or html property to the button |
html | (string) optional, a string with HTML that should be inserted into the button |
css | (string) adds style classes to a button |
icon | (string) an icon of the button |
items | (array) an array of nested controls.You can find the full list of all available controls here. If the type of a nested control is not specified, the menuItem type will be applied by default. |
group | (string) defines the name of a group of controls a button belongs to. If one of the buttons in the group becomes active, all others automatically become inactive |
hotkey | (string) the name of the hot key for the button |
tooltip | (string) a tooltip for the button |
count | (number) a badge with a number |
countColor | (string) the color of a badge with number: "danger" | "secondary" | "primary" | "success" |
multiClick | (boolean) defines the behavior of the Undo/Redo buttons:
|
view | (string) defines the look of a button: "flat"|"link" |
size | (string) defines the size of a button: "small"|"medium" |
color | (string) defines the color scheme of a button: "danger"|"secondary"|"primary"|"success" |
full | (boolean) extends a button to the full width of a form |
circle | (boolean) makes the corners of a button round |
loading | (boolean) adds a spinner into a button |
hidden | (boolean) defines whether a button is hidden |
disabled | (boolean) defines whether a button is disabled |
A button can have an icon which is set through the corresponding option icon:
{
type:"button", value:"Done",
icon:"dxi dxi-check"
}
You can add a number badge to the button to display information like the number of new messages. The badge is set via the count property:
{
type:"button", value:"Done",
icon:"dxi dxi-check",
count:10
}
You can add any custom HTML content to a button with the help of the html property:
{
type: "button",
html: "<div class='user-button'><img src='../avatars/Avatar.jpg'/></div>",
}
Related sample: Toolbar. Item HTML Content
To hide/show a button, you should pass the ID of the button to the hide() / show() Toolbar methods:
toolbar.show(id);
toolbar.hide(id);
Related sample: Toolbar. Hide/Show
Any button in the toolbar can be enabled/disabled:
toolbar.enable(id);
toolbar.disable(id);
Related sample: Toolbar. Enable/Disable
You can add a tooltip to a button:
{
type:"button",
value:"Click",
tooltip:"Click me and find out why" }
Related sample: Toolbar. Tooltips
Back to top