Skip to main content
Version: 4.x

vime-control

A generic player control that is designed to work with both touch and mouse devices. It also seamlessly works with vime-tooltip, which can be passed in via the default slot.

Visual#

Vime control component

Usage#

<vime-player>  <!-- ... -->  <vime-ui>    <!-- ... -->    <vime-controls full-width>      <vime-control label="Playback" keys="k" pressed="false">        <vime-icon href="#vime-play"></vime-icon>        <vime-tooltip>Play (k)</vime-tooltip>      </vime-control>    </vime-controls>  </vime-ui></vime-player>

Properties#

PropertyAttributeDescriptionTypeDefault
expandedexpandedIf the control has a popup menu, this indicates whether the menu is open or not. Sets the aria-expanded property.boolean ∣ undefinedundefined
hiddenhiddenWhether the control should be displayed or not.booleanfalse
identifieridentifierThe id attribute of the control.string ∣ undefinedundefined
keyskeysA slash (/) separated string of JS keyboard keys (KeyboardEvent.key), that when caught in a keydown event, will trigger a click event on the control.string ∣ undefinedundefined
label (required)labelThe aria-label property of the control.stringundefined
menumenuIf the control has a popup menu, then this should be the id of said menu. Sets the aria-controls property.string ∣ undefinedundefined
pressedpressedIf the control is a toggle, this indicated whether the control is in a "pressed" state or not. Sets the aria-pressed property.boolean ∣ undefinedundefined

Events#

EventDescriptionType
vInteractionChangeEmitted when the user is interacting with the control by focusing, touching or hovering on it.CustomEvent<boolean>

Slots#

SlotDescription
Used to pass in the content of the control (text/icon/tooltip).

CSS Custom Properties#

NameDescription
--vm-control-bgThe background of the control.
--vm-control-borderThe border of the control.
--vm-control-border-radiusThe border radius of the control.
--vm-control-colorThe text color of the control.
--vm-control-focus-bgThe background colour of a control when it is being hovered on or focused.
--vm-control-focus-colorThe text colour of a control when it is being hovered on or focused.
--vm-control-paddingThe padding inside the control.
--vm-control-scaleThe amount to scale the control up/down by.
--vm-control-tap-highlightThe highlight color when a control is tapped.

Dependencies#

Used by#

Graph#

graph TD;  vime-caption-control --> vime-control  vime-fullscreen-control --> vime-control  vime-mute-control --> vime-control  vime-pip-control --> vime-control  vime-playback-control --> vime-control  vime-settings-control --> vime-control  style vime-control fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS