vime-control-group

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

Visual

Usage

HTML

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-controls full-width>

<vime-control-group>

<vime-scrubber-control></vime-scrubber-control>

</vime-control-group>

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

<vime-playback-control></vime-playback-control>

<vime-volume-control></vime-volume-control>

</vime-control-group>

</vime-controls>

</vime-ui>

</vime-player>

React

import React from 'react';

import {

VimePlayer,

VimeUi,

VimeControls,

VimeControlGroup,

VimeScrubberControl,

VimePlaybackControl,

VimeVolumeControl,

} from '@vime/react';

function Example() {

return (

<VimePlayer>

{/* ... */}

<VimeUi>

<VimeControls fullWidth>

<VimeControlGroup>

<VimeScrubberControl />

</VimeControlGroup>

<VimeControlGroup space="top">

<VimePlaybackControl />

<VimeVolumeControl />

</VimeControlGroup>

</VimeControls>

</VimeUi>

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer>

<!-- ... -->

<VimeUi>

<VimeControls>

<VimeControlGroup>

<VimeScrubberControl />

</VimeControlGroup>

<VimeControlGroup space="top">

<VimePlaybackControl />

<VimeVolumeControl />

</VimeControlGroup>

</VimeControls>

</VimeUi>

</VimePlayer>

</template>

<script>

import {

VimePlayer,

VimeUi,

VimeControls,

VimeControlGroup,

VimeScrubberControl,

VimePlaybackControl,

VimeVolumeControl,

} from '@vime/vue';

export default {

components: {

VimePlayer,

VimeUi,

VimeControls,

VimeControlGroup,

VimeScrubberControl,

VimePlaybackControl,

VimeVolumeControl,

},

};

</script>

Svelte

example.svelte

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeControls fullWidth>

<VimeControlGroup>

<VimeScrubberControl />

</VimeControlGroup>

<VimeControlGroup space="top">

<VimePlaybackControl />

<VimeVolumeControl />

</VimeControlGroup>

</VimeControls>

</VimeUi>

</VimePlayer>

<script lang="ts">

import {

VimePlayer,

VimeUi,

VimeControls,

VimePlaybackControl,

VimeVolumeControl,

VimeScrubberControl,

VimeControlGroup,

} from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vime-player>

{/* ... */}

<vime-ui>

<vime-controls fullWidth>

<vime-control-group>

<vime-scrubber-control />

</vime-control-group>

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

<vime-playback-control />

<vime-volume-control />

</vime-control-group>

</vime-controls>

</vime-ui>

</vime-player>

);

}

}

Angular

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-controls>

<vime-control-group>

<vime-scrubber-control></vime-scrubber-control>

</vime-control-group>

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

<vime-playback-control></vime-playback-control>

<vime-volume-control></vime-volume-control>

<!-- ... -->

</vime-control-group>

</vime-controls>

</vime-ui>

</vime-player>

Properties

Property	Attribute	Description	Type	Default
space	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

• vime-default-controls

Graph

graph TD;

vime-default-controls --> vime-control-group

style vime-control-group fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS