vm-menu-radio-group

A collection of radio buttons describing a set of related options. Only one radio button in a group can be selected at the same time.

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