Menu Javascript API

Class

MenuItemsGroup

Horizontal, Vertical and Popup Menu. Popup Menus appear when a user taps an interactive UI element such as an icon, button, action, or content, such as selected items or text.

smart-menu

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-menu animation='none'></smart-menu>

Set the animation property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.animation = 'simple';

Get the animation property.

 const menu = document.querySelector('smart-menu');

 let animation = menu.animation;

autoCloseDelaynumber

Determines delay (in milliseconds) before a Menu dropdown is closed when leaving the Menu with the mouse. Applicable only when selectionMode is 'mouseenter'.

Default value

100

Example

Set the autoCloseDelay property.

 <smart-menu auto-close-delay='1000'></smart-menu>

Set the autoCloseDelay property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.autoCloseDelay = 200;

Get the autoCloseDelay property.

 const menu = document.querySelector('smart-menu');

 let autoCloseDelay = menu.autoCloseDelay;

autoFocusOnMouseenterboolean

If set to true, on mouseenter, the element receives focus automatically.

Default value

false

Example

Set the autoFocusOnMouseenter property.

 <smart-menu auto-focus-on-mouseenter></smart-menu>

Set the autoFocusOnMouseenter property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.autoFocusOnMouseenter = false;

Get the autoFocusOnMouseenter property.

 const menu = document.querySelector('smart-menu');

 let autoFocusOnMouseenter = menu.autoFocusOnMouseenter;

checkableboolean

Allows top-level Menu items (immediate children of the Menu) to be checkable. Sublevels are controlled by setting checkable to the respective smart-menu-items-group.

Default value

false

Example

Set the checkable property.

 <smart-menu checkable></smart-menu>

Set the checkable property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.checkable = false;

Get the checkable property.

 const menu = document.querySelector('smart-menu');

 let checkable = menu.checkable;

Sets or gets whether checkboxes and radio buttons can be displayed in the Menu. This property is applicable only to the Menu itself, and not its smart-menu-item/smart-menu-items-group subitems. See also the property checkable.

Default value

false

Try a demo showcasing the checkboxes property.

Example

Set the checkboxes property.

 <smart-menu checkboxes></smart-menu>

Set the checkboxes property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.checkboxes = false;

Get the checkboxes property.

 const menu = document.querySelector('smart-menu');

 let checkboxes = menu.checkboxes;

checkMode"checkbox" | "radioButton"

Sets the check mode of top-level Menu items (immediate children of the Menu). checkMode can be set to 'checkbox', 'radioButton', or a comma-separated list containing 'checkbox', 'radioButton', or 'none' (e.g. 'checkbox, radioButton, none, checkbox'). When set to a list, each value in the list is applied to groups of Menu items separated by an item with separator (item after the one with separator is the start of a new checkMode context). Sublevels are controlled by setting checkMode to the respective smart-menu-items-group.

Allowed Values

"checkbox" - A check box is shown inside a menu item that is selected.
"radioButton" - A radio dot is shown inside a menu item that is selected.

Default value

"checkbox"

Example

Set the checkMode property.

 <smart-menu check-mode='radioButton'></smart-menu>

Set the checkMode property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.checkMode = 'checkbox';

Get the checkMode property.

 const menu = document.querySelector('smart-menu');

 let checkMode = menu.checkMode;

closeAction"down" | "up" | "none"

Sets the document event which closes any open Menu drop downs (or the Menu itself when mode is 'dropDown').

Allowed Values

"down" - Closes the drop down on document down event.
"up" - Closes the drop down on document up event.
"none" - The drop down can be closed only from the menu.

Default value

"up"

Example

Set the closeAction property.

 <smart-menu close-action='down'></smart-menu>

Set the closeAction property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.closeAction = 'none';

Get the closeAction property.

 const menu = document.querySelector('smart-menu');

 let closeAction = menu.closeAction;

dataSource{label: string, shortcut: string, value: any, items:[]}[]

Determines the data source that will be loaded to the Menu. The data source represents an array of objects with the following properties:

label - a string representing the text content of the item.
value - the value of the item.
shortcut - a string representing a shortuct for the item. It will be displayed inside the item.
items - allows to define an array of sub menu items.

Try a demo showcasing the dataSource property.

Example

Set the dataSource property.

 <smart-menu data-source='[{ label: "File" }, { label: "Help" }]'></smart-menu>

Set the dataSource property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.dataSource = [{ label: 'File', items: [{ label: 'New', shortcut: 'Ctrl+N' }] }];

Get the dataSource property.

 const menu = document.querySelector('smart-menu');

 let dataSource = menu.dataSource;

disabledboolean

Enables or disables element.

Default value

false

Example

Set the disabled property.

 <smart-menu disabled></smart-menu>

Set the disabled property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.disabled = false;

Get the disabled property.

 const menu = document.querySelector('smart-menu');

 let disabled = menu.disabled;

displayMemberstring

Determines the field in the data source that corresponds to an item's label.

Default value

"label"

Example

Set the displayMember property.

 <smart-menu display-member='title'></smart-menu>

Set the displayMember property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.displayMember = 'caption';

Get the displayMember property.

 const menu = document.querySelector('smart-menu');

 let displayMember = menu.displayMember;

dropDownAppendTostring | HTMLElement

Sets custom outer container, where all dropdown containers must be appended. By default they are inside the menu. The value of the property can be an HTML element or the id of an HTML element. In mode 'dropDown', the property dropDownAppendTo also controls the parent element of the whole Menu. The open method works relatively to the original place of the Menu in the DOM.

Try a demo showcasing the dropDownAppendTo property.

Example

Set the dropDownAppendTo property.

 <smart-menu drop-down-append-to='body'></smart-menu>

Set the dropDownAppendTo property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.dropDownAppendTo = 'customContainer';

Get the dropDownAppendTo property.

 const menu = document.querySelector('smart-menu');

 let dropDownAppendTo = menu.dropDownAppendTo;

dropDownOverlayboolean

If this property is enabled, when an element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document.

Default value

false

Example

Set the dropDownOverlay property.

 <smart-menu drop-down-overlay></smart-menu>

Set the dropDownOverlay property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.dropDownOverlay = false;

Get the dropDownOverlay property.

 const menu = document.querySelector('smart-menu');

 let dropDownOverlay = menu.dropDownOverlay;

dropDownPosition"auto" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "overlay-left" | "overlay-right"

Determines the opening direction of Menu dropdowns.

Allowed Values

"auto" - The position is automatically determined by measuring the available distance around the element for the drop down to open freely without being clipped by the edges of the browser. By default the drop down will try to open below the element. If the available space is not enough for the popup to appear it will open in one of the following directions, if possible: top, over.
"top-left" - The drop down opens above and to the left of the seleted Item Group.
"top-right" - The drop down opens above and to the right of the seleted Item Group.
"bottom-left" - The drop down opens below and to the left of the seleted Item Group.
"bottom-right" - The drop down opens below and to the right of the seleted Item Group.
"overlay-left" - The drop down opens over the seleted Item Group by aligning to the left.
"overlay-right" - The drop down opens over and to the left of the seleted Item Group by aligning to the right.

Default value

"auto"

Try a demo showcasing the dropDownPosition property.

Example

Set the dropDownPosition property.

 <smart-menu drop-down-position='top-left'></smart-menu>

Set the dropDownPosition property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.dropDownPosition = 'top-right';

Get the dropDownPosition property.

 const menu = document.querySelector('smart-menu');

 let dropDownPosition = menu.dropDownPosition;

itemsarray

A getter that returns an array of all Menu items.

Default value

itemsMemberstring

Determines the field in the data source that corresponds to an item group's subitems collection.

Default value

"items"

Example

Set the itemsMember property.

 <smart-menu items-member='children'></smart-menu>

Set the itemsMember property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.itemsMember = 'subitems';

Get the itemsMember property.

 const menu = document.querySelector('smart-menu');

 let itemsMember = menu.itemsMember;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-menu locale='de'></smart-menu>

Set the locale property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.locale = 'en';

Get the locale property.

 const menu = document.querySelector('smart-menu');

 let locale = menu.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property.

 <smart-menu localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-menu>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const menu = document.querySelector('smart-menu');

 let localizeFormatFunction = menu.localizeFormatFunction;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value

"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property.

 <smart-menu messages='{"de":{"propertyUnknownType":"'{{name}}' Eigenschaft ist mit undefined 'Typ'-Member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-menu>

Set the messages property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property.

 const menu = document.querySelector('smart-menu');

 let messages = menu.messages;

minimizeIconTemplatestring

Used to load a custom minimize icon from an HTMLTemplateElement object. The HTMLTemplateElement is selected by it's id.

Default value

"null"

Example

Set the minimizeIconTemplate property.

 <smart-menu minimize-icon-template='template1'></smart-menu>

Set the minimizeIconTemplate property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.minimizeIconTemplate = 'template2';

Get the minimizeIconTemplate property.

 const menu = document.querySelector('smart-menu');

 let minimizeIconTemplate = menu.minimizeIconTemplate;

minimizeWidthnumber

Determines the minimum width of the Menu at which it will switch from normal to minimized mode. If set to null, the Menu does not minimize automatically.

Example

Set the minimizeWidth property.

 <smart-menu minimize-width='100'></smart-menu>

Set the minimizeWidth property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.minimizeWidth = 200;

Get the minimizeWidth property.

 const menu = document.querySelector('smart-menu');

 let minimizeWidth = menu.minimizeWidth;

mode"horizontal" | "vertical" | "dropDown" | "tree"

Determines the menu's display mode.

Allowed Values

"horizontal" - Menu root items are displayed horizontally and the drop down appears below/above or over the element.
"vertical" - Menu root items are displayed vertically and the drop down appears to the left/right or over the element.
"dropDown" - The menu acts as a popup. It's hidden by default. Calling the open and close methods can show or hide it.
"tree" - The menu appears as a tree and all items are aligned according to their parents.

Default value

"horizontal"

Example

Set the mode property.

 <smart-menu mode='vertical'></smart-menu>

Set the mode property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.mode = 'dropDown';

Get the mode property.

 const menu = document.querySelector('smart-menu');

 let mode = menu.mode;

openedboolean

Opens or closes thte menu when it's in 'dropDown' mode.

Default value

false

Example

Set the opened property.

 <smart-menu opened></smart-menu>

Set the opened property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.opened = false;

Get the opened property.

 const menu = document.querySelector('smart-menu');

 let opened = menu.opened;

overflow"auto" | "hidden" | "scroll"

Sets or gets the menu's scroll buttons behavior. Applicable only when dropDownAppendTo is not null.

Allowed Values

"auto" - The scroll buttons are automatically shown/hidden depending on the visibility of the items. If there's an item that is not visible the appropriate scroll button will appear in order to fully scroll to it.
"hidden" - The scroll buttons are hidden.
"scroll" - The scroll buttons are always visible.

Default value

"auto"

Try a demo showcasing the overflow property.

Example

Set the overflow property.

 <smart-menu overflow='hidden'></smart-menu>

Set the overflow property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.overflow = 'scroll';

Get the overflow property.

 const menu = document.querySelector('smart-menu');

 let overflow = menu.overflow;

preventCloseOnCheckboolean

If set to true, prevents the closing of the Menu or its dropdowns when Menu items are checked/unchecked.

Default value

false

Example

Set the preventCloseOnCheck property.

 <smart-menu prevent-close-on-check></smart-menu>

Set the preventCloseOnCheck property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.preventCloseOnCheck = false;

Get the preventCloseOnCheck property.

 const menu = document.querySelector('smart-menu');

 let preventCloseOnCheck = menu.preventCloseOnCheck;

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property.

 <smart-menu readonly></smart-menu>

Set the readonly property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.readonly = true;

Get the readonly property.

 const menu = document.querySelector('smart-menu');

 let readonly = menu.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-menu right-to-left></smart-menu>

Set the rightToLeft property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.rightToLeft = false;

Get the rightToLeft property.

 const menu = document.querySelector('smart-menu');

 let rightToLeft = menu.rightToLeft;

selectionMode"click" | "mouseenter"

Determines the menu's selection mode.

Allowed Values

"click" - A menu item is selected when clicked.
"mouseenter" - A menu item is selected when hovered

Default value

"click"

Try a demo showcasing the selectionMode property.

Example

Set the selectionMode property.

 <smart-menu selection-mode='mouseenter'></smart-menu>

Set the selectionMode property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.selectionMode = 'click';

Get the selectionMode property.

 const menu = document.querySelector('smart-menu');

 let selectionMode = menu.selectionMode;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property.

 <smart-menu theme='blue'></smart-menu>

Set the theme property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.theme = 'red';

Get the theme property.

 const menu = document.querySelector('smart-menu');

 let theme = menu.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-menu unfocusable></smart-menu>

Set the unfocusable property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.unfocusable = false;

Get the unfocusable property.

 const menu = document.querySelector('smart-menu');

 let unfocusable = menu.unfocusable;

valueMemberstring

Determines the field in the data source that corresponds to an item's value.

Default value

"value"

Example

Set the valueMember property.

 <smart-menu value-member='info'></smart-menu>

Set the valueMember property by using the HTML Element's instance.

 const menu = document.querySelector('smart-menu');

 menu.valueMember = 'details';

Get the valueMember property.

 const menu = document.querySelector('smart-menu');

 let valueMember = menu.valueMember;

Events

closeCustomEvent

This event is triggered when the menu is closed. The event is fired only in 'dropDown' mode.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

This event is triggered when the menu is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function. The event is fired only in 'dropDown' mode.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onClosing

Arguments

evCustomEvent

ev.detailObject

ev.detail.trigger - Indicates whether the event was called from inside the element or programatically.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of closing event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('closing', function (event) {
    const detail = event.detail,
        trigger = detail.trigger;

	// event handling code goes here.
})

collapseCustomEvent

This event is triggered when a smart-menu-items-group is collapsed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCollapse

Arguments

evCustomEvent

ev.detailObject

ev.detail.item - The menu item that was collapsed.

ev.detail.label - The label of the toggled item that was collapsed.

ev.detail.value - The value of the toggled item that was collapsed.

ev.detail.path - The path of the toggled item that was collapsed, e.g. '0.1', '1.1.2'.

ev.detail.children - The children items of the toggled item that was collapsed.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of collapse event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('collapse', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value,
        path = detail.path,
        children = detail.children;

	// event handling code goes here.
})

collapsingCustomEvent

This event is triggered when a smart-menu-items-group is collapsing.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onCollapsing

Arguments

evCustomEvent

ev.detailObject

ev.detail.item - The menu item that is going to be collapsed.

ev.detail.label - The label of the toggled item that is going to be collapsed.

ev.detail.value - The value of the toggled item that is going to be collapsed.

ev.detail.path - The path of the toggled item that is going to be collapsed, e.g. '0.1', '1.1.2'.

ev.detail.children - The children items of the toggled item that is going to be collapsed.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of collapsing event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('collapsing', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value,
        path = detail.path,
        children = detail.children;

	// event handling code goes here.
})

expandCustomEvent

This event is triggered when a smart-menu-items-group is expanded.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onExpand

Arguments

evCustomEvent

ev.detailObject

ev.detail.item - The menu item that was expanded.

ev.detail.label - The label of the toggled item that was expanded.

ev.detail.value - The value of the toggled item that was expanded.

ev.detail.path - The path of the toggled item that was expanded, e.g. '0.1', '1.1.2'.

ev.detail.children - The children items of the toggled item that was expanded.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of expand event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('expand', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value,
        path = detail.path,
        children = detail.children;

	// event handling code goes here.
})

expandingCustomEvent

This event is triggered before a smart-menu-items-group is expanded.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onExpanding

Arguments

evCustomEvent

ev.detailObject

ev.detail.item - The menu item that is going to be expanded.

ev.detail.label - The label of the toggled item that is going to be expanded.

ev.detail.value - The value of the toggled item that is going to be expanded.

ev.detail.path - The path of the toggled item that is going to be expanded, e.g. '0.1', '1.1.2'.

ev.detail.children - The children items of the toggled item that is going to be expanded.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of expanding event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('expanding', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value,
        path = detail.path,
        children = detail.children;

	// event handling code goes here.
})

itemCheckChangeCustomEvent

This event is triggered when a menu item check state is changed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onItemCheckChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.item - The menu item which state was changed.

ev.detail.label - The label of the item which state was changed.

ev.detail.value - The value of the item which state was changed.

ev.detail.checked - The checked state of the toggled item. If false the item is not toggled.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of itemCheckChange event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('itemCheckChange', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value,
        checked = detail.checked;

	// event handling code goes here.
})

itemClickCustomEvent

This event is triggered when a menu item is clicked.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onItemClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.item - The menu item that is toggled.

ev.detail.label - The label of the toggled item.

ev.detail.value - The value of the toggled item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the itemClick event.

Example

Set up the event handler of itemClick event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('itemClick', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

openCustomEvent

This event is triggered when the menu is opened. The event is fired only in 'dropDown' mode.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of open event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('open', function (event) {
	// event handling code goes here.
})

openingCustomEvent

This event is triggered when the menu is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function. The event is fired only in 'dropDown' mode.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onOpening

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of opening event.

const menu = document.querySelector('smart-menu');
menu.addEventListener('opening', function (event) {
	// event handling code goes here.
})

Methods

addItem( Item: HTMLElement, Parent?: HTMLElement | string): void

Adds an item to the menu.

Arguments

ItemHTMLElement

A smart-menu-item to add to the Menu.

Parent?HTMLElement | string

The smart-menu-items-group or its id or numeric path to add the item to.

Invoke the addItem method.

const menu = document.querySelector('smart-menu');
menu.addItem("document.createElement('smart-menu-item')","0");

Try a demo showcasing the addItem method.

checkItem( item: HTMLElement | string): void

Checks an item.

Arguments

itemHTMLElement | string

smart-menu-item/smart-menu-items-group or its id or numeric path.

Invoke the checkItem method.

const menu = document.querySelector('smart-menu');
menu.checkItem("0.0");

clear(): void

Clears all Menu items.

Invoke the clear method.

const menu = document.querySelector('smart-menu');
menu.clear();

clickItem( item: HTMLElement | string): void

Clicks on an item programatically.

Arguments

itemHTMLElement | string

smart-menu-item/smart-menu-items-group or its id or numeric path.

Invoke the clickItem method.

const menu = document.querySelector('smart-menu');
menu.clickItem("menuItemRef");

close(): void

Closes the Menu when mode is 'dropDown'.

Invoke the close method.

const menu = document.querySelector('smart-menu');
menu.close();

collapseItem( item?: HTMLElement | string, animation?: boolean): void

Collapses an item.

Arguments

item?HTMLElement | string

smart-menu-item/smart-menu-items-group or its id or numeric path. If no item is passed, all open items are collapsed.

animation?boolean

If set to false, disables collapse animation even if animation is enabled for the element.

Invoke the collapseItem method.

const menu = document.querySelector('smart-menu');
menu.collapseItem("0.0");

expandItem( item: HTMLElement | string, animation?: boolean): void

Expands an item.

Arguments

itemHTMLElement | string

smart-menu-item/smart-menu-items-group or its id or numeric path.

animation?boolean

If set to false, disables expand animation even if animation is enabled for the element.

Invoke the expandItem method.

const menu = document.querySelector('smart-menu');
menu.expandItem("1.2");

getItem( id: string): HTMLElement

Gets an item by its id or numeric path.

Arguments

idstring

The id or numeric path of an item

ReturnsHTMLElement

Invoke the getItem method.

const menu = document.querySelector('smart-menu');
const result = menu.getItem("0.0");

maximize(): void

Maximizes the Menu.

Invoke the maximize method.

const menu = document.querySelector('smart-menu');
menu.maximize();

minimize(): void

Minimizes the Menu.

Invoke the minimize method.

const menu = document.querySelector('smart-menu');
menu.minimize();

open( left: number, top: number): void

Opens the Menu when mode is 'dropDown'.

Arguments

leftnumber

Horizontal position

topnumber

Vertical position

Invoke the open method.

const menu = document.querySelector('smart-menu');
menu.open();

removeItem( item: HTMLElement | string): void

Removes an item from the menu.

Arguments

itemHTMLElement | string

The smart-menu-item/smart-menu-items-group or its id or numeric path to remove.

Invoke the removeItem method.

const menu = document.querySelector('smart-menu');
menu.removeItem("0.0");

Try a demo showcasing the removeItem method.

uncheckItem( item: HTMLElement | string): void

Unchecks an item.

Arguments

itemHTMLElement | string

smart-menu-item/smart-menu-items-group (or its id or numeric path)

Invoke the uncheckItem method.

const menu = document.querySelector('smart-menu');
menu.uncheckItem("0.0");

CSS Variables

Default value

"var(--smart-bar-width)"

smartMenu default width

Default value

"var(--smart-bar-height)"

smartMenu default height

Default value

"calc(var(--smart-bar-width) / 2)"

vertical and context smartMenu default width

Default value

"var(--smart-bar-width)"

vertical and context smartMenu default height

Default value

"calc(var(--smart-bar-height) / 1.5)"

smartMenu scroll buttons size. Horizontal Menu scroll buttons width = Vertical Menu scroll buttons height.

L

S

V

Properties

checkedboolean

Default value

true

 <smart-menu-item checked></smart-menu-item>

disabledboolean

Enables or disables element.

Default value

false

Example

Set the disabled property.

 <smart-menu-item disabled></smart-menu-item>

Set the disabled property by using the HTML Element's instance.

 const menuitem = document.querySelector('smart-menu-item');

 menuitem.disabled = false;

Get the disabled property.

 const menuitem = document.querySelector('smart-menu-item');

 let disabled = menuitem.disabled;

labelany

Default value

""

levelnumber

separatorboolean

Default value

true

 <smart-menu-item separator></smart-menu-item>

shortcutstring

Default value

""

valueany

C

D

E

L

S

V

Properties

checkableboolean

Default value

false

 <smart-menu-items-group checkable></smart-menu-items-group>

checkedboolean

Default value

false

 <smart-menu-items-group checked></smart-menu-items-group>

checkMode"checkbox" | "radioButton"

Default value

"checkbox"

disabledboolean

Enables or disables element.

Default value

false

Example

Set the disabled property.

 <smart-menu-items-group disabled></smart-menu-items-group>

Set the disabled property by using the HTML Element's instance.

 const menuitemsgroup = document.querySelector('smart-menu-items-group');

 menuitemsgroup.disabled = false;

Get the disabled property.

 const menuitemsgroup = document.querySelector('smart-menu-items-group');

 let disabled = menuitemsgroup.disabled;

dropDownHeightnumber

expandedboolean

Default value

false

 <smart-menu-items-group expanded></smart-menu-items-group>

labelany

Default value

""

levelnumber

separatorboolean

Default value

false

 <smart-menu-items-group separator></smart-menu-items-group>

Menu Javascript API

animation"none" | "simple" | "advanced"

Default value

Example

autoCloseDelaynumber

Default value

Example

autoFocusOnMouseenterboolean

Default value

Example

checkableboolean

Default value

Example

checkboxesboolean

Default value

Example

checkMode"checkbox" | "radioButton"

Default value

Example

closeAction"down" | "up" | "none"

Default value

Example

dataSource{label: string, shortcut: string, value: any, items:[]}[]

Example

disabledboolean

Default value

Example

displayMemberstring

Default value

Example

dropDownAppendTostring | HTMLElement

Example

dropDownOverlayboolean

Default value

Example

dropDownPosition"auto" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "overlay-left" | "overlay-right"

Default value

Example

itemsarray

Default value

itemsMemberstring

Default value

Example

localestring

Default value

Example

localizeFormatFunctionfunction | null

Example

messagesobject

Default value

Example

minimizeIconTemplatestring

Default value

Example

minimizeWidthnumber

Example

mode"horizontal" | "vertical" | "dropDown" | "tree"

Default value

Example

openedboolean

Default value

Example

overflow"auto" | "hidden" | "scroll"

Default value

Example

preventCloseOnCheckboolean

Default value