Duration

Overview

Formats a given duration in milliseconds based on various additional hints, such that its appearance becomes aligned with the desired scheme.

<duration

  value: number

  ↪ Duration in milliseconds

  units: string

  ↪ Units to format the duration into; available units:

  ↪ i: milliseconds

  ↪ s: seconds

  ↪ m: minutes

  ↪ h: hours

  ↪ d: days

  ↪ M: months

  ↪ y: years

  unit-renderer: markup(null)

  ↪ Renderer called for each displayed unit; introduces:

  ↪ - value: Long | Double

  ↪ - unit: String (e.g. "i", "s", etc.)

  separator: markup(null)

  ↪ Separator in-between units

  zeroes: string(null)

  ↪ Specify units to render despite being zero-valued

/>

Examples

Default Style

When just supplying a value as well as some units to format into, the default style will be plain but efficient:

Code-Blocks are only available within the browser

Value Shorthand

For convenience, the Code-Blocks are only available within the browser attribute also supports a bound expression of arbitrary name, while all other attributes support bound expressions with matching names.

Code-Blocks are only available within the browser

Custom Style

As to really show what's possible, let's not just render different unit-suffixes, but also account for singular/plural differentiation, color groups based on their unit and add a colored separator.

Code-Blocks are only available within the browser