vm-time

Formats and displays the progression of playback as currentTime (separator) endTime.

Visual

Usage

HTML

<vm-time label="Time" seconds="120" />

React

import React from 'react';

import { Time } from '@vime/react';

function Example() {

return <Time label="Time" seconds={120} />;

}

Vue

example.vue

<template>

<time label="Time" :seconds="120" />

</template>

<script>

import { Time } from '@vime/vue';

export default {

components: {

Time,

},

};

</script>

Svelte

<Time label="Time" seconds={120} />

<script lang="ts">

import { Time } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return <vm-time label="Time" seconds={120} />;

}

}

Angular

example.html

<vm-time label="Time" [seconds]="120" />

Properties

Property	Description	Type	Default
alwaysShowHours	Whether the time should always show the hours unit, even if the time is less than 1 hour (eg: 20:35 -> 00:20:35).	boolean	false
label (required)	The aria-label property of the time.	string	undefined
seconds	The length of time in seconds.	number	0

CSS Custom Properties

Name	Description
--vm-time-color	The color of the text displaying the time.
--vm-time-font-size	The size of the font displaying the time.
--vm-time-font-weight	The weight of the font displaying the time.

Dependencies

Used by

• vm-current-time
• vm-end-time