This is a button that contains a drop-down list of options.
Related sample: Toolbar. Select Button
A new SelectButton can be created with the help of the add() method of Tree Collection:
toolbar.data.add(
{
id: "title",
value: "Select count or use alt+num"
},
{
id: "currentButton",
type: "selectButton",
value: "1",
items: [
{
value: "1",
hotkey: "alt+1"
},
{
value: "2",
hotkey: "alt+2"
},
{
value: "3",
hotkey: "alt+3"
},
{
value: "4",
hotkey: "alt+4"
}
]
}
);
The selectButton object has the following properties:
type | (string) the type of a control, set it to "selectButton". 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 item |
value | (string) a value of the button |
css | (string|string[]) adds style classes to a button |
icon | (string) the name of an icon from the used icon font |
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. |
tooltip | (string) a tooltip for the control |
count | (number) a badge with a number |
countColor | (string) the color of a badge with number: "danger" | "secondary" | "primary" | "success" |
hidden | (boolean) defines whether a button is hidden |
disabled | (boolean) defines whether a button is disabled |
You can perform operations over the SelectButton control with the help of the available Toolbar API and Tree Collection API.
Back to top