Skip to main content
Version: 5.x

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

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

Properties#

PropertyDescriptionTypeDefault
expandedIf the control has a popup menu, this indicates whether the menu is open or not. Sets the aria-expanded property.boolean ∣ undefinedundefined
hiddenWhether the control should be displayed or not.booleanfalse
identifierThe id attribute of the control.string ∣ undefinedundefined
keysA 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)The aria-label property of the control.stringundefined
menuIf the control has a popup menu, then this should be the id of said menu. Sets the aria-controls property.string ∣ undefinedundefined
pressedIf the control is a toggle, this indicated whether the control is in a "pressed" state or not. Sets the aria-pressed property.boolean ∣ undefinedundefined

Methods#

MethodDescriptionSignature
blurControlRemoves focus from the control.blurControl() => Promise<void>
focusControlFocuses the control.focusControl() => Promise<void>

Events#

EventDescriptionType
vmBlurEmitted when the control loses focus.CustomEvent<void>
vmFocusEmitted when the control receives focus.CustomEvent<void>
vmInteractionChangeEmitted 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-icon-sizeThe size of the icon in pixels.
--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#