vime-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

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-controls>

<!-- ... -->

<vime-settings-control></vime-settings-control>

</vime-controls>

</vime-ui>

</vime-player>

React

import React from 'react';

import {

VimePlayer,

VimeUi,

VimeControls,

VimeSettingsControl,

} from '@vime/react';

function Example() {

return (

<VimePlayer>

{/* ... */}

<VimeUi>

{/* ... */}

<VimeControls>

<VimeSettingsControl />

</VimeControls>

</VimeUi>

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeControls>

<VimeSettingsControl />

</VimeControls>

</VimeUi>

</VimePlayer>

</template>

<script>

import {

VimePlayer,

VimeUi,

VimeControls,

VimeSettingsControl,

} from '@vime/vue';

export default {

components: {

VimePlayer,

VimeUi,

VimeControls,

VimeSettingsControl,

},

};

</script>

Svelte

example.svelte

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeControls>

<VimeSettingsControl />

</VimeControls>

</VimeUi>

</VimePlayer>

<script lang="ts">

import {

VimePlayer,

VimeUi,

VimeControls,

VimeSettingsControl,

} from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vime-player>

{/* ... */}

<vime-ui>

{/* ... */}

<vime-controls>

<vime-settings-control />

</vime-controls>

</vime-ui>

</vime-player>

);

}

}

Angular

example.html

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-controls>

<!-- ... -->

<vime-settings-control></vime-settings-control>

</vime-controls>

</vime-ui>

</vime-player>

Properties

Property	Attribute	Description	Type	Default
expanded	expanded	Whether the settings menu this control manages is open.	boolean	false
icon	icon	The URL to an SVG element or fragment to load.	string	'#vime-settings'
menu	menu	The DOM id of the settings menu this control is responsible for opening/closing.	string ∣ undefined	undefined
tooltipDirection	tooltip-direction	The direction in which the tooltip should grow.	"left" ∣ "right" ∣ undefined	undefined
tooltipPosition	tooltip-position	Whether the tooltip is positioned above/below the control.	"bottom" ∣ "top"	'top'

Dependencies

Used by

• vime-default-controls

Depends on

• vime-control
• vime-icon
• vime-tooltip

Graph

graph TD;

vime-settings-control --> vime-control

vime-settings-control --> vime-icon

vime-settings-control --> vime-tooltip

vime-default-controls --> vime-settings-control

style vime-settings-control fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS