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