count-up
The count-up component is a display-only component that continuously updates in real-time to show the elapsed time since a given start timestamp.
Core structure | |
|---|---|
startTimestamp | Add a start date, date/time or time , either using: - datasource, e.g. =@ctx.datasources.events.date - expression, e.g. =$fromMillis($toMillis($now()) + 50000) - string, e.g. "2023-09-20 18:00", or "2023-07-25T17:30:00+02:00" If startTimestamp is omitted or set to null, the component remains static and does not count up. |
Other options | |
|---|---|
labels | The count-up label displays time in the format Days: Hours: Minutes: Seconds. The Days section appears only when the timer exceeds 24 hours. Configuration options are: - isVisible (default: true)- Controls visibility of the count-up labels. Setting it to false hides the labels. - position - Determines whether the count-up labels (Days: Hours: Minutes: Seconds) appear at the top or bottom of the count-up display. |
size | Choose between extra-large and medium sizes, with extra-large as the default if the property is not specified in the YAML. |
This example shows how to set up a basic count-up component that starts counting from the current moment.
This example displays two count-up components of different sizes. The first is extra-large, with labels positioned above it, while the second is medium-sized with labels below.
This example showcases two count-up components using a datasource with timestamp records in ISO format and milliseconds. The first component uses the millisecond timestamp, while the second uses the ISO format timestamp.
This example demonstrates how to use the state in a when property to initially hide the count-up component and reveal it when a start button is pressed within a list-item.
