Toolbar Button properties
Usage
const data = [
{
type: "button";
id?: string | number;
parent?: string | number;
value?: string;
html?: string;
css?: string | string[];
icon?: string;
items?: IMenuElement[]; // ISpacer | ISeparator | INavItem | IMenuItem | ICustomHTML
group?: string;
hotkey?: string;
tooltip?: string;
count?: number;
countColor?: "danger" | "secondary" | "primary" | "success";
multiClick?: boolean;
view?: "flat" | "link";
size?: "small" | "medium";
color?: "danger" | "secondary" | "primary" | "success";
full?: boolean;
circle?: boolean;
loading?: boolean;
hidden?: boolean;
disabled?: boolean;
},
// more Toolbar controls
]
Description
type | (required) the type of a control, set it to "button". If not specified - the "navItem" type is applied by default. |
id | (optional) the id of a control, auto-generated if not set |
parent | (optional) the parent of the block |
value | (optional) a value of the button. You need to set either the value or html property to the button |
html | (optional) a string with HTML that should be inserted into the button |
css | (optional) adds style classes to a button |
icon | (optional) an icon of the button |
items | (optional) 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 | (optional) 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 | (optional) the name of the hot key for the button |
tooltip | (optional) a tooltip for the button |
count | (optional) a badge with a number |
countColor | (optional) the color of a badge with number: "danger" | "secondary" | "primary" | "success" |
multiClick | (optional) if true - the "click" event will fire multiple times when the button is clicked and held; if false - the "click" event will fire on each click of the button |
view | (optional) defines the look of a button: "flat"|"link" |
size | (optional) defines the size of a button: "small"|"medium" |
color | (optional) defines the color scheme of a button: "danger"|"secondary"|"primary"|"success" |
full | (optional) extends a button to the full width of a form |
circle | (optional) makes the corners of a button round |
loading | (optional) adds a spinner into a button |
hidden | (optional) defines whether a button is hidden |
disabled | (optional) defines whether a button is disabled |
Example
Related article: Button