Count Down

The <salla-count-down> web component is used to show the amount of time left until a given date. It's perfect for tracking important events, or counting down to special occasions like birthdays and anniversaries. It displays the days, hours, minutes, and seconds left with an easy-to-read countdown timer, as well as customized color, size, and labeled text properties.

Example

Usage

HTML

SASS

Properties

Property	Attribute	Description	Type	Default
Boxed	`boxed`	The count down numbers will appear in boxes, if the value is set to `true`.	`boolean`	`undefined`
Color	`color`	The color of the count down.	`"dark" \| "light" \| "primary"`	`'dark'`
Date	`date`	The count down date format, which is the following: MMM DD, YYYY HH:mm:ss. (Example: Jan 2, 2023 16:37:52).	`string`	`undefined`
Digits	`digits`	The digits language format standard to show in the count down.	`"auto" \| "en"`	`'auto'`
End of Day	`end-text`	the count down will end at the end of the day, if value set to `true`.	`boolean`	`undefined`
End Text	`end-text`	The text to show when the count down ends.	`string`	`undefined`
Labeled	`labeled`	Shows labels for each count down number.	`boolean`	`undefined`
Size	`size`	The count down size.	`"lg" \| "md" \| "sm"`	`'md'`

Methods

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as endCountDown which ends the cound down set by the developer.

Method	Description	Return Type
`endCountDown()`	Ends the count down.	`Promise<void>`

Example#

Usage#

Properties#

Methods#

Example

Usage

Properties

Methods