vm-settings-control

A control for toggling the visiblity of the settings menu. This control is not displayed if no settings (vime-settings) has been provided for the current player.

Visual

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-settings-control></vm-settings-control>

</vm-controls>

</vm-ui>

</vm-player>

React

import React from 'react';

import { Player, Ui, Controls, SettingsControl } from '@vime/react';

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<Controls>

<SettingsControl />

</Controls>

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<SettingsControl />

</Controls>

</Ui>

</Player>

</template>

<script>

import { Player, Ui, Controls, SettingsControl } from '@vime/vue';

export default {

components: {

Player,

Ui,

Controls,

SettingsControl,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<SettingsControl />

</Controls>

</Ui>

</Player>

<script lang="ts">

import { Player, Ui, Controls, SettingsControl } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-controls>

<vm-settings-control />

</vm-controls>

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-settings-control></vm-settings-control>

</vm-controls>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
expanded	Whether the settings menu this control manages is open.	boolean	false
hideTooltip	Whether the tooltip should not be displayed.	boolean	false
icon	The name of the settings icon to resolve from the icon library.	string	'settings'
icons	The name of an icon library to use. Defaults to the library defined by the icons player property.	string ∣ undefined	undefined
menu	The DOM id of the settings menu this control is responsible for opening/closing.	string ∣ undefined	undefined
tooltipDirection	The direction in which the tooltip should grow.	"left" ∣ "right" ∣ undefined	undefined
tooltipPosition	Whether the tooltip is positioned above/below the control.	"bottom" ∣ "top"	'top'

Methods

Method	Description	Signature
blurControl	Removes focus from the control.	blurControl() => Promise<void>
focusControl	Focuses the control.	focusControl() => Promise<void>

Dependencies

Used by

• vm-default-controls

Depends on

• vm-control
• vm-icon
• vm-tooltip