Skip to main content
Version: 5.x

vm-settings

A container for a collection of submenus and options for the player. On desktop, the settings is displayed as a small popup menu (scroll appears if height >= maxHeight) on the bottom right-hand side of a video player, or slightly above the right-hand side of an audio player. On mobile, the settings is displayed as a bottom sheet.

Visual#

Vime settings component

Usage#

<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-settings>
<!-- ... -->
</vm-settings>
</vm-ui>
</vm-player>

Properties#

PropertyDescriptionTypeDefault
activeWhether the settings menu is opened/closed.booleanfalse
pinPins the settings to the defined position inside the video player. This has no effect when the view is of type audio (always bottomRight) and on mobile devices (always bottom sheet)."bottomLeft" ∣ "bottomRight" ∣ "topLeft" ∣ "topRight"'bottomRight'

Methods#

MethodDescriptionSignature
setControllerSets the controller responsible for opening/closing this settings menu.setController(controller: SettingsController) => Promise<void>

Slots#

SlotDescription
Used to pass in the body of the settings menu, which usually contains submenus.

CSS Custom Properties#

NameDescription
--vm-settings-border-radiusThe border radius of the settings menu.
--vm-settings-max-heightThe max height of the settings menu.
--vm-settings-paddingThe padding inside the settings menu.
--vm-settings-scroll-thumb-colorThe color of the settings scrollbar thumb.
--vm-settings-scroll-track-colorThe color of the settings scrollbar track.
--vm-settings-scroll-widthThe width of the settings scrollbar.
--vm-settings-shadowThe shadow cast around the settings menu frame.
--vm-settings-transitionThe CSS transitions for the settings menu.
--vm-settings-widthThe width of the settings menu on desktop.

Dependencies#

Used by#

Depends on#