vm-menu-radio-group

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

<vm-submenu label="Playback Rate">

<vm-menu-radio-group value="1">

<vm-menu-radio label="0.5" value="0.5" />

<vm-menu-radio label="Normal" value="1" />

<vm-menu-radio label="2" value="2" />

</vm-menu-radio-group>

</vm-submenu>

</vm-settings>

</vm-ui>

</vm-player>

React

import React, { useState } from 'react';

import {

Player,

Ui,

Settings,

Submenu,

MenuRadioGroup,

MenuRadio,

} from '@vime/react';

function Example() {

const [value, setValue] = useState('1');

const onValueChange = (event: Event) => {

const radio = event.target as HTMLVmMenuRadioElement;

setValue(radio.value);

};

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<Settings>

<Submenu label="Playback Rate">

<MenuRadioGroup value={value} onVmCheck={onValueChange}>

<MenuRadio label="0.5" value="0.5" />

<MenuRadio label="Normal" value="1" />

<MenuRadio label="2" value="2" />

</MenuRadioGroup>

</Submenu>

</Settings>

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Settings>

<Submenu label="Playback Rate">

<MenuRadioGroup :value="value" @vmCheck="onValueChange($event)">

<MenuRadio label="0.5" value="0.5" />

<MenuRadio label="Normal" value="1" />

<MenuRadio label="2" value="2" />

</MenuRadioGroup>

</Submenu>

</Settings>

</Ui>

</Player>

</template>

<script>

import {

Player,

Ui,

Settings,

Submenu,

MenuRadioGroup,

MenuRadio,

} from "@vime/vue";

export default {

components: {

Player,

Ui,

Settings,

Submenu,

MenuRadioGroup,

MenuRadio,

},

data: {

value: 1,

},

methods: {

onValueChange(event) {

const radio = event.target as HTMLVmMenuRadioElement;

this.value = radio.value;

},

},

};

</script>

Svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Settings>

<Submenu label="Playback Rate">

<MenuRadioGroup value={value} on:vmCheck={onValueChange}>

<MenuRadio label="0.5" value="0.5" />

<MenuRadio label="Normal" value="1" />

<MenuRadio label="2" value="2" />

</MenuRadioGroup>

</Submenu>

</Settings>

</Ui>

</Player>

<script lang="ts">

import {

Player,

Ui,

Settings,

Submenu,

MenuRadioGroup,

MenuRadio,

} from '@vime/svelte';

let value = '1';

const onValueChange = (event: Event) => {

const radio = event.target as HTMLVmMenuRadioElement;

value = radio.value;

};

</script>

Stencil

class Example {

@State() value = '1';

private onValueChange(event: Event) {

const radio = event.target as HTMLVmMenuRadioElement;

this.value = radio.value;

}

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-settings>

<vm-submenu label="Playback Rate">

<vm-menu-radio-group

value={this.value}

onVmCheck={this.onValueChange.bind(this)}

>

<vm-menu-radio label="0.5" value="0.5" />

<vm-menu-radio label="Normal" value="1" />

<vm-menu-radio label="2" value="2" />

</vm-menu-radio-group>

</vm-submenu>

</vm-settings>

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-settings>

<vm-submenu label="Playback Rate">

<vm-menu-radio-group [value]="value" (vmCheck)="onValueChange($event)">

<vm-menu-radio label="0.5" value="0.5" />

<vm-menu-radio label="Normal" value="1" />

<vm-menu-radio label="2" value="2" />

</vm-menu-radio-group>

</vm-submenu>

</vm-settings>

</vm-ui>

</vm-player>

example.ts

import { MenuRadio } from '@vime/angular';

class Example {

value = '1';

onValueChange(event: Event) {

const radio = event.target as MenuRadio;

this.value = radio.value;

}

}

Properties

Property	Description	Type	Default
value	The current value selected for this group.	string ∣ undefined	undefined

Events

Event	Description	Type
vmCheck	Emitted when a new radio button is selected for this group.	CustomEvent<void>

Slots

Slot	Description
	Used to pass in radio buttons (vm-menu-radio).

Dependencies

Used by

• vm-default-settings