Start with the basic example, then compare related settings before moving to controlled, asynchronous or combined use cases.
Preview configuration: :time="2 * 60 * 60 * 1000".
| Configuration | Purpose | Related examples |
|---|
time | Countdown duration in milliseconds | Time format and custom content, Statistic |
format | Display format | Time format and custom content, Statistic |
Compare unit formats, milliseconds and custom time fragments, independently of playback controls.
format: Controls the displayed format.
| Configuration | Purpose | Related examples |
|---|
time | Countdown duration in milliseconds | Manual |
auto-start | Whether to auto start count down | Manual |
format | Display format | Manual |
format: Controls the displayed format.
| Prop | Description | Type | Default |
|---|
time | Countdown duration in milliseconds | number | string | 0 |
format | Display format | string | 'HH:mm:ss' |
auto-start | Whether to auto start count down | boolean | true |
| Format | Description |
|---|
DD | Day |
HH | Hour |
mm | Minute |
ss | Seconds |
S | Milliseconds: 1 digit |
SS | Milliseconds: 2 digits |
SSS | Milliseconds: 3 digits |
| Event | Description | Arguments |
|---|
change | Emitted after countdown changed | timeData: TimeData |
end | Emitted after countdown ended | - |
| Slot | Description | Arguments |
|---|
default | Custom content | timeData: TimeData |
| Name | Description | Type |
|---|
days | Remain days | number |
hours | Remain hours | number |
minutes | Remain minutes | number |
seconds | Remaining seconds | number |
milliseconds | Remain milliseconds | number |
| Method | Description | Arguments | Returns |
|---|
start | Start countdown | - | - |
pause | Pause countdown | - | - |
reset | Reset the countdown; when auto-start is true, it starts automatically after reset | - | - |
The component exports the following types
import type { CountdownProps, CountdownInstance, TimeData } from '@cedar-design/ui'
| Variable | Default |
|---|
--c-countdown-text-color | var(--c-sys-color-content-primary) |
--c-countdown-text-font-size | var(--c-font-size-lg) |
Each platform maintains a complete local implementation. They do not import a common core or share component instances or reactive state. Changes must update both implementations. Component bodies, props, key styles and paired tests have read-only source consistency checks; theme tokens and installation entries remain local to each library.
SSR renders the initial formatted time. Changing format while paused updates the display. The finish event fires once per round; reset starts another round. Unmounting cleans up animation frames.
