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
#
Usage- HTML
- React
- Vue
- Svelte
- Stencil
- Angular
example.vue
example.html
example.ts
#
PropertiesProperty | Description | Type | Default |
---|---|---|---|
active | Whether the menu is open/visible. | boolean | false |
controller | Reference to the controller DOM element that is responsible for opening/closing this menu. | HTMLElement ∣ undefined | undefined |
identifier (required) | The id attribute of the menu. | string | undefined |
slideInDirection | The direction the menu should slide in from. | "left" ∣ "right" ∣ undefined | undefined |
#
MethodsMethod | Description | Signature |
---|---|---|
blurMenu | Removes focus from the menu. | blurMenu() => Promise<void> |
calculateHeight | Calculates the height of the settings menu based on its children. | calculateHeight() => Promise<number> |
focusMenu | Focuses the menu. | focusMenu() => Promise<void> |
getActiveMenuItem | Returns the currently focused menu item. | getActiveMenuItem() => Promise<HTMLVmMenuItemElement ∣ undefined> |
setActiveMenuItem | Sets the currently focused menu item. | setActiveMenuItem(item?: HTMLVmMenuItemElement ∣ undefined) => Promise<void> |
#
EventsEvent | Description | Type |
---|---|---|
vmActiveMenuItemChange | Emitted when the currently focused menu item changes. | CustomEvent<HTMLVmMenuItemElement ∣ undefined> |
vmActiveSubmenuChange | Emitted when the active submenu changes. | CustomEvent<HTMLVmSubmenuElement ∣ undefined> |
vmBlur | Emitted when the menu loses focus. | CustomEvent<void> |
vmClose | Emitted when the menu has closed/is not active. | CustomEvent<HTMLVmMenuElement> |
vmFocus | Emitted when the menu is focused. | CustomEvent<void> |
vmMenuHeightChange | Emitted when the height of the menu changes. | CustomEvent<number> |
vmOpen | Emitted when the menu is open/active. | CustomEvent<HTMLVmMenuElement> |
#
SlotsSlot | Description |
---|---|
Used to pass in the body of the menu which usually contains menu items, radio groups and/or submenus. |
#
CSS Custom PropertiesName | Description |
---|---|
--vm-menu-bg | The background color the menu. |
--vm-menu-color | The text color within the menu. |
--vm-menu-font-size | The font size of text within the menu. |
--vm-menu-font-weight | The font weight of text within the menu. |
--vm-menu-transition | The CSS transitions applied to the menu. |
--vm-menu-z-index | The position in the UI z-axis stack inside the player. |