Version: 5.x

vm-submenu

A menu that is to be nested inside another menu. A submenu is closed by default and it provides a menu item that will open/close it. It's main purpose is to organize a menu by grouping related sections/options together that can be navigated to by the user.

Visual#

Vime submenu component

Usage#

<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-settings>
<vm-submenu label="Title">
<!-- ... -->
</vm-submenu>
</vm-settings>
</vm-ui>
</vm-player>

Properties#

PropertyDescriptionTypeDefault
activeWhether the submenu is open/closed.booleanfalse
hintThis can provide additional context about the current state of the submenu. For example, the hint could be the currently selected option if the submenu contains a radio group.string ∣ undefinedundefined
label (required)The title of the submenu.stringundefined
slideInDirectionThe direction the submenu should slide in from."left" ∣ "right" ∣ undefined'right'

Methods#

MethodDescriptionSignature
getControllerReturns the controller (vm-menu-item) for this submenu.getController() => Promise<HTMLVmMenuItemElement ∣ undefined>
getControllerHeightReturns the height of the submenu controller.getControllerHeight() => Promise<number>
getMenuReturns the menu (vm-menu) for this submenu.getMenu() => Promise<HTMLVmMenuElement ∣ undefined>

Events#

EventDescriptionType
vmCloseSubmenuEmitted when the submenu has closed/is not active.CustomEvent<HTMLVmSubmenuElement>
vmOpenSubmenuEmitted when the submenu is open/active.CustomEvent<HTMLVmSubmenuElement>

Slots#

SlotDescription
Used to pass in the body of the submenu which is usually a set of choices in the form of a radio group (vm-menu-radio-group).

Dependencies#

Used by#

Depends on#