Skip to main content
Version: 5.x

vm-controls

Responsible for positioning and laying out individual/groups of controls.

Visual#

Vime controls component

Usage#

<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-controls full-width active-duration="3200">
<!-- ... -->
</vm-controls>
</vm-ui>
</vm-player>

Properties#

PropertyDescriptionTypeDefault
activeDurationThe length in milliseconds that the controls are active for before fading out. Audio players are not effected by this prop.number2750
alignSets the align-items flex property that aligns the individual controls on the cross-axis."center" ∣ "end" ∣ "start"'center'
directionSets the flex-direction property that manages the direction in which the controls are layed out."column" ∣ "row"'row'
fullHeightWhether the controls container should be 100% height. This has no effect if the view is of type audio.booleanfalse
fullWidthWhether the controls container should be 100% width. This has no effect if the view is of type audio.booleanfalse
hiddenWhether the controls are visible or not.booleanfalse
hideOnMouseLeaveWhether the controls should hide when the mouse leaves the player. Audio players are not effected by this prop.booleanfalse
hideWhenPausedWhether the controls should show/hide when paused. Audio players are not effected by this prop.booleanfalse
justifySets the justify-content flex property that aligns the individual controls on the main-axis."center" ∣ "end" ∣ "space-around" ∣ "space-between" ∣ "space-evenly" ∣ "start"'start'
pinPins the controls to the defined position inside the video player. This has no effect when the view is of type audio."bottomLeft" ∣ "bottomRight" ∣ "center" ∣ "topLeft" ∣ "topRight"'bottomLeft'
waitForPlaybackStartWhether the controls should wait for playback to start before being shown. Audio players are not effected by this prop.booleanfalse

Slots#

SlotDescription
Used to pass in controls.

CSS Custom Properties#

NameDescription
--vm-controls-bgThe background color of the controls.
--vm-controls-border-radiusThe border radius of the controls.
--vm-controls-paddingThe padding inside the controls.
--vm-controls-spacingThe space between controls.
--vm-controls-z-indexThe position in the UI z-axis stack inside the player.

Dependencies#

Used by#