This is a button that contains a drop-down list of options.
A new SelectButton can be created with the help of the add() method of Tree Collection:
ribbon.data.add({
id:"select",
type: "selectButton",
value: "jpeg",
size: "small",
count: 20,
items: [
{
value: "jpeg",
hotkey: "alt+1"
},
{
value: "pdf",
hotkey: "alt+2"
},
{
value: "png",
hotkey: "alt+3"
}
]
});
Related sample: Ribbon. Select Button
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) the 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. |
size | (string) defines the size of a button: "small"|"medium"|"auto" |
count | (number) a badge with a number |
countColor | (string) the color of a badge with number: "danger" | "secondary" | "primary" | "success" |
tooltip | (string) a tooltip for the control |
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 Ribbon API and Tree Collection API.
Back to top