vm-menu-radio

Menu radio buttons are presented in radio groups (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 from 'react';

import {

Player,

Ui,

Settings,

Submenu,

MenuRadioGroup,

MenuRadio,

} from '@vime/react';

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<Settings>

<Submenu label="Playback Rate">

<MenuRadioGroup value="1">

<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="1">

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

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Settings>

<Submenu label="Playback Rate">

<MenuRadioGroup value="1">

<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';

</script>

Stencil

class Example {

render() {

return (

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

);

}

}

Angular

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

Properties

Property	Description	Type	Default
badge	This can provide additional context about the value. For example, if the option is for a set of video qualities, the badge could describe whether the quality is UHD, HD etc.	string ∣ undefined	undefined
checkIcon	The URL to an SVG element or fragment to load.	string ∣ undefined	'check'
checked	Whether the radio item is selected or not.	boolean	false
icons	The name of an icon library to use. Defaults to the library defined by the icons player property.	string ∣ undefined	undefined
label (required)	The title of the radio item displayed to the user.	string	undefined
value (required)	The value associated with this radio item.	string	undefined

Events

Event	Description	Type
vmCheck	Emitted when the radio button is selected.	CustomEvent<void>

Dependencies

Used by

• vm-default-settings

Depends on

• vm-menu-item