vm-control-group

A simple container that enables player controls to be organized into groups. Each group starts on a new line.

Visual

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls full-width>

<vm-control-group>

<vm-scrubber-control></vm-scrubber-control>

</vm-control-group>

<vm-control-group space="top">

<vm-playback-control></vm-playback-control>

<vm-volume-control></vm-volume-control>

</vm-control-group>

</vm-controls>

</vm-ui>

</vm-player>

React

import React from 'react';

import {

Player,

Ui,

Controls,

ControlGroup,

ScrubberControl,

PlaybackControl,

VolumeControl,

} from '@vime/react';

function Example() {

return (

<Player>

{/* ... */}

<Ui>

<Controls fullWidth>

<ControlGroup>

<ScrubberControl />

</ControlGroup>

<ControlGroup space="top">

<PlaybackControl />

<VolumeControl />

</ControlGroup>

</Controls>

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<Controls>

<ControlGroup>

<ScrubberControl />

</ControlGroup>

<ControlGroup space="top">

<PlaybackControl />

<VolumeControl />

</ControlGroup>

</Controls>

</Ui>

</Player>

</template>

<script>

import {

Player,

Ui,

Controls,

ControlGroup,

ScrubberControl,

PlaybackControl,

VolumeControl,

} from '@vime/vue';

export default {

components: {

Player,

Ui,

Controls,

ControlGroup,

ScrubberControl,

PlaybackControl,

VolumeControl,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls fullWidth>

<ControlGroup>

<ScrubberControl />

</ControlGroup>

<ControlGroup space="top">

<PlaybackControl />

<VolumeControl />

</ControlGroup>

</Controls>

</Ui>

</Player>

<script lang="ts">

import {

Player,

Ui,

Controls,

PlaybackControl,

VolumeControl,

ScrubberControl,

ControlGroup,

} from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

<vm-controls fullWidth>

<vm-control-group>

<vm-scrubber-control />

</vm-control-group>

<vm-control-group space="top">

<vm-playback-control />

<vm-volume-control />

</vm-control-group>

</vm-controls>

</vm-ui>

</vm-player>

);

}

}

Angular

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<vm-control-group>

<vm-scrubber-control></vm-scrubber-control>

</vm-control-group>

<vm-control-group space="top">

<vm-playback-control></vm-playback-control>

<vm-volume-control></vm-volume-control>

<!-- ... -->

</vm-control-group>

</vm-controls>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
space	Determines where to add spacing/margin. The amount of spacing is determined by the CSS variable --control-group-spacing.	"both" ∣ "bottom" ∣ "none" ∣ "top"	'none'

CSS Custom Properties

Name	Description
--vm-control-group-spacing	The space between control groups.

Dependencies

Used by

• vm-default-controls