countdown
The countdown component functionality counts down from a date, date/time, and time. When the time expires, you can configure an outcome, for example, open a different , or perform an action. The countdown starts as soon as the containing the component.countdown opens.
Core structure | |
|---|---|
expiresAt | Add a date, date/time or time when the countdown must expire/stop, either using: - datasource, e.g. [email protected] - expression, e.g. =$fromMillis($toMillis($now()) + 50000) - string, e.g. "2023-09-20 18:00", or "2023-07-25T17:30:00+02:00" |
Other options | |
|---|---|
align | center, left, right, and stretch, with center as the default if the property is not specified in the YAML. |
labels | isVisible - true or false with true as the default. Setting false will hide the countdown component. position - The countdown labels of Days : Hours : Minutes: Seconds are shown at the bottom or top of the countdown. |
size | Choose from extra-large, large, medium, small, with large being the default if the property is not specified in the YAML. |
Actions | |
|---|---|
onPress | Choose from the provided list of available actions, for example, use the go-to action to open a different . |
onFinish | Choose from the provided list of available actions. For example, go-back action. |
- This component's function is to countdown to a predefined date/time. It is not recommended to use the component as a timer.
- The component.countdown can only be used in a jig.default.
- The countdown's separator is by default shown as a colon :.
- The countdown starts when you navigate to the containing the component.countdown.
- Use any inputs for the countdown configuration, for example, different types of datasources, states and inputs.
- Use the set-state and reset-state actions to set and reset the countdown.
This example shows the expiresAt property value set using a static value, an expression, a static datasource, and a dynamic datasource.
Example: See the full example in GitHub.
You can choose to align the component.countdown to the left, right, center and stretch it across the screen.
Example: See the full example in GitHub.
Use the size property in the component.countdown to change the size from extra-large to small.
Example: See the full example in GitHub.
This example shows two scenarios, the first opens a different when the component is pressed and the second opens a URL when pressed. Use the onPress property to set up an action when pressing on the component.
Example: See the full example in GitHub.
In this example the onFinish property is used to show a modal when the component.countdown expiresAt property reaches zero.
Example: See the full example in GitHub.
