Skip to main content

Toolbar NavItem properties

Usage

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

Description

type(optional) the type of a control, set it to "navItem"
id(optional) the id of a control, auto-generated if not set
parent(optional) the parent of the item
value(optional) a value of the navItem. You need to set either the value or html property to the navItem
html(optional) a string with HTML that should be inserted into the navItem
css(optional) adds style classes to a navItem
icon(optional) an icon of the navItem
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.
twoState(optional) adds two states to the item: active (pressed) and inactive (unpressed)
active(optional) sets the state of a twoState item
group(optional) defines the name of a group of controls a navItem belongs to. If one of the navItems in the group becomes active, all others automatically become inactive
hotkey(optional) the name of the hot key for the item
tooltip(optional) a tooltip for the navItem
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

Related article: NavItem