Menu JAVASCRIPT UI Component API

Menu Javascript API

Class

Menu

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.

Selector

smart-menu

Properties

Events

Methods

Properties

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

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

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;

checkboxesboolean

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

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.

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').

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.

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.

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.

Default value

"auto"

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.

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.

Default value

"auto"

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;

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

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.

Default value

"click"

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.

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();

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

--smart-menu-default-widthvar()

Default value

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

smartMenu default width

--smart-menu-default-heightvar()

Default value

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

smartMenu default height

--smart-menu-vertical-default-widthvar()

Default value

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

vertical and context smartMenu default width

--smart-menu-vertical-default-heightvar()

Default value

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

vertical and context smartMenu default height

--smart-menu-scroll-button-sizevar()

Default value

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

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


MenuItem

Defines a menu item.

Selector

smart-menu-item

Properties

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


MenuItemsGroup

Defines a group of menu items.

Selector

smart-menu-items-group

Properties

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>

valueany