Skip to main content
Version: 5.x

vm-menu

A multi-purpose interactable element inside a menu. The behaviour and style of the item depends on the props set.

  • Default: By default, the menu item only contains a label and optional hint/badge text that is displayed on the right-hand side of the item.

  • Navigation: If the menu prop is set, the item behaves as a navigational control and displays arrows to indicate whether clicking the control will navigate forwards/backwards.

  • Radio: If the checked prop is set, the item behaves as a radio button and displays a checkmark icon to indicate whether it is checked or not.

Visual#

Vime settings menu item 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#