Skip to main content

Toolbar MenuItem properties

Usage​

const data = [
    {
        type: "menuItem";
        id?: string | number;
        parent?: string | number;
        value?: string;
        html?: string;
        css?: string | string[];
        icon?: string;
        items?: IMenuElement[]; // ISpacer | ISeparator | IMenuItem
        hotkey?: string;
        tooltip?: string;
        count?: number | string;
        countColor?: "danger" | "secondary" | "primary" | "success";
        multiClick?: boolean;
        hidden?: boolean;
        disabled?: boolean;
    },
    // more Toolbar controls
]

Description​

type(required) the type of a control, set it to "menuItem". 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 item
value(optional) a value for the menu item. You need to set either the value or html property to the item
html(optional) a string with HTML that should be inserted into the menu item
css(optional) adds style classes
icon(optional) the name of an icon from the used icon font
items(optional) an array of child controls (note that all the children should have the type menuItem)
hotkey(optional) the name of a keyboard shortcut for a menu item
tooltip(optional) a tooltip for the menuItem
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 item is clicked and held; if false - the "click" event will fire on each click of the item
hidden(optional) defines whether a control is hidden
disabled(optional) defines whether an item is disabled

Example​

toolbar.data.add(
    {
        type:"menuItem", 
        value:"Toolbar menuItem", 
        tooltip: "Press me",  
        items:[
            { type:"menuItem", value:"Option 1" },
            { type:"menuItem", value:"Option 2" },
            { type:"separator"},
            { type:"menuItem", value:"Option Infinite" }
        ]
    }
);

Related article: MenuItem