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

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-menu identifer="menu-id" controller="menu-controller-id" active>

<!-- ... -->

</vm-menu>

</vm-ui>

</vm-player>

React

import React, { useState } from "react";

import { Player, Ui, Menu } from "@vime/react";

function Example() {

const [isMenuActive, setIsMenuActive] = useState(false);

const onOpen = () => {

setIsMenuActive(true);

};

const onClose = () => {

setIsMenuActive(false);

};

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<Menu

identifer="menu-id"

controller="menu-controller-id"

active={isMenuActive}

onVmOpen={onOpen}

onVmClose={onClose}

>

<!-- ... -->

</Menu>

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Menu

identifer="menu-id"

controller="menu-controller-id"

:active="isMenuActive"

@vmOpen="onOpen"

@vmClose="onClose"

>

<!-- ... -->

</Menu>

</Ui>

</Player>

</template>

<script>

import { Player, Ui, Menu } from '@vime/vue';

export default {

components: {

Player,

Ui,

Menu,

},

data: {

isMenuActive: false,

},

methods: {

onOpen() {

this.isMenuActive = true;

},

onClose() {

this.isMenuActive = false;

},

},

};

</script>

Svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Menu

identifer="menu-id"

controller="menu-controller-id"

active={isMenuActive}

on:vmOpen={onOpen}

on:vmClose={onClose}

>

<!-- ... -->

</Menu>

</Ui>

</Player>

<script lang="ts">

import { Player, Ui, Menu } from '@vime/svelte';

let isMenuActive = false;

const onOpen = () => {

isMenuActive = true;

};

const onClose = () => {

isMenuActive = false;

};

</script>

Stencil

class Example {

@State() isMenuActive = false;

private onOpen() {

this.isMenuActive = true;

}

private onClose() {

this.isMenuActive = false;

}

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-menu

identifer="menu-id"

controller="menu-controller-id"

active={this.isMenuActive}

onVmOpen={this.onOpen.bind(this)}

onVmClose={this.onClose.bind(this)}

>

{/* ... */}

</vm-menu>

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-menu

identifer="menu-id"

controller="menu-controller-id"

[active]="isMenuActive"

(vmOpen)="onOpen()"

(vmClose)="onClose()"

>

<!-- ... -->

</vm-menu>

</vm-ui>

</vm-player>

example.ts

class Example {

isMenuActive = false;

onOpen() {

this.isMenuActive = true;

}

onClose() {

this.isMenuActive = false;

}

}

Properties

Property	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

Methods

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

Events

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

Slots

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

CSS Custom Properties

Name	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.

Dependencies

Used by

• vm-settings
• vm-submenu