vime-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

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

Properties

PropertyAttributeDescriptionTypeDefault
activeactiveWhether the menu is open/visible.booleanfalse
controller (required)controllerThe id attribute value of the control responsible for opening/closing this menu.stringundefined
identifier (required)identifierThe id attribute of the menu.stringundefined

Events

EventDescriptionType
vCloseEmitted when the menu has closed/is not active.CustomEvent<void>
vFocusMenuItemChangeEmitted when the currently focused menu item changes.CustomEvent<HTMLVimeMenuItemElement โˆฃ undefined>
vMenuItemsChangeEmitted when the menu items present changes.CustomEvent<NodeListOf<HTMLVimeMenuItemElement> โˆฃ undefined>
vOpenEmitted when the menu is open/active.CustomEvent<void>

Methods

focusOnOpen() => Promise<void>

This should be called directly before opening the menu to set the keyboard focus on it. This is a one-time operation and needs to be called everytime prior to opening the menu.

Returns

Type: Promise<void>

getController() => Promise<HTMLElement>

Returns the controller responsible for opening/closing this menu.

Returns

Type: Promise<HTMLElement>

getFocusedMenuItem() => Promise<HTMLVimeMenuItemElement>

Returns the currently focused menu item.

Returns

Type: Promise<HTMLVimeMenuItemElement>

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-z-indexThe position in the UI z-axis stack inside the player.

Dependencies

Used by

Graph

graph TD;
vime-settings --> vime-menu
vime-submenu --> vime-menu
style vime-menu fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS