Version: 5.x

vm-menu

This component is responsible for containing and managing menu items and submenus. The menu is ARIA friendly by ensuring the correct ARIA properties are set, and enabling keyboard navigation when it is focused.

You can use this component if you'd like to build out a custom settings menu. If you're looking to only customize the content of the settings see vime-settings, and if you want an easier starting point see vime-default-settings.

Visual#

Vime settings menu component

Usage#

<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-menu identifer="menu-id" controller="menu-controller-id" active>
<!-- ... -->
</vm-menu>
</vm-ui>
</vm-player>

Properties#

PropertyDescriptionTypeDefault
activeWhether the menu is open/visible.booleanfalse
controllerReference to the controller DOM element that is responsible for opening/closing this menu.HTMLElement ∣ undefinedundefined
identifier (required)The id attribute of the menu.stringundefined
slideInDirectionThe direction the menu should slide in from."left" ∣ "right" ∣ undefinedundefined

Methods#

MethodDescriptionSignature
blurMenuRemoves focus from the menu.blurMenu() => Promise<void>
calculateHeightCalculates the height of the settings menu based on its children.calculateHeight() => Promise<number>
focusMenuFocuses the menu.focusMenu() => Promise<void>
getActiveMenuItemReturns the currently focused menu item.getActiveMenuItem() => Promise<HTMLVmMenuItemElement ∣ undefined>
setActiveMenuItemSets the currently focused menu item.setActiveMenuItem(item?: HTMLVmMenuItemElement ∣ undefined) => Promise<void>

Events#

EventDescriptionType
vmActiveMenuItemChangeEmitted when the currently focused menu item changes.CustomEvent<HTMLVmMenuItemElement ∣ undefined>
vmActiveSubmenuChangeEmitted when the active submenu changes.CustomEvent<HTMLVmSubmenuElement ∣ undefined>
vmBlurEmitted when the menu loses focus.CustomEvent<void>
vmCloseEmitted when the menu has closed/is not active.CustomEvent<HTMLVmMenuElement>
vmFocusEmitted when the menu is focused.CustomEvent<void>
vmMenuHeightChangeEmitted when the height of the menu changes.CustomEvent<number>
vmOpenEmitted when the menu is open/active.CustomEvent<HTMLVmMenuElement>

Slots#

SlotDescription
Used to pass in the body of the menu which usually contains menu items, radio groups and/or submenus.

CSS Custom Properties#

NameDescription
--vm-menu-bgThe background color the menu.
--vm-menu-colorThe text color within the menu.
--vm-menu-font-sizeThe font size of text within the menu.
--vm-menu-font-weightThe font weight of text within the menu.
--vm-menu-transitionThe CSS transitions applied to the menu.
--vm-menu-z-indexThe position in the UI z-axis stack inside the player.

Dependencies#

Used by#