Version: 5.x
vm-control-spacer
Used to space controls out vertically/horizontally. Under the hood it's simply flex: 1.
Visual#
Usage#
- HTML
- React
- Vue
- Svelte
- Stencil
- Angular
<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-controls full-width>
<vm-playback-control></vm-playback-control>
<vm-volume-control></vm-volume-control>
<vm-control-spacer></vm-control-spacer>
<vm-fullscreen-control></vm-fullscreen-control>
</vm-controls>
</vm-ui>
</vm-player>
import React from 'react';
import {
Player,
Ui,
Controls,
PlaybackControl,
VolumeControl,
ControlSpacer,
FullscreenControl,
} from '@vime/react';
function Example() {
return (
<Player>
{/* ... */}
<Ui>
<Controls fullWidth>
<PlaybackControl />
<VolumeControl />
<ControlSpacer />
<FullscreenControl />
</Controls>
</Ui>
</Player>
);
}
example.vue
<template>
<Player>
<!-- ... -->
<Ui>
<Controls>
<PlaybackControl />
<VolumeControl />
<ControlSpacer />
<FullscreenControl />
</Controls>
</Ui>
</Player>
</template>
<script>
import {
Player,
Ui,
Controls,
PlaybackControl,
VolumeControl,
ControlSpacer,
FullscreenControl,
} from '@vime/vue';
export default {
components: {
Player,
Ui,
Controls,
PlaybackControl,
VolumeControl,
ControlSpacer,
FullscreenControl,
},
};
</script>
example.svelte
<Player>
<!-- ... -->
<Ui>
<!-- ... -->
<Controls fullWidth>
<PlaybackControl />
<VolumeControl />
<ControlSpacer />
<FullscreenControl />
</Controls>
</Ui>
</Player>
<script lang="ts">
import {
Player,
Ui,
Controls,
PlaybackControl,
VolumeControl,
ControlSpacer,
FullscreenControl,
} from '@vime/svelte';
</script>
class Example {
render() {
return (
<vm-player>
{/* ... */}
<vm-ui>
{/* ... */}
<vm-controls fullWidth>
<vm-playback-control />
<vm-volume-control />
<vm-control-spacer />
<vm-fullscreen-control />
</vm-controls>
</vm-ui>
</vm-player>
);
}
}
example.html
<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-controls full-width>
<vm-playback-control></vm-playback-control>
<vm-volume-control></vm-volume-control>
<vm-control-spacer></vm-control-spacer>
<vm-fullscreen-control></vm-fullscreen-control>
</vm-controls>
</vm-ui>
</vm-player>