Version: 4.x

vime-control-group

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

Visual#

Vime control group component

Usage#

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

Properties#

PropertyAttributeDescriptionTypeDefault
spacespaceDetermines 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#

NameDescription
--vm-control-group-spacingThe space between control groups.

Dependencies#

Used by#

Graph#

graph TD;
vime-default-controls --> vime-control-group
style vime-control-group fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS