CountDown

CountDown is used to display the countdown value in real time. If you need to maintain the consistent font style of numbers with the site's design, we recommend downloading the TCloudNumber font from the "Number Font" section of fonts, and importing the TCloudNumberVF.ttf font resource into your project for use.

Code Demo

Base Countdown

在 Stackblitz 中打开

Adjust Size

在 Stackblitz 中打开

name	type	default	description	required
className	String	-	className of component	N
style	Object	-	CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties`	N
autoStart	Boolean	true	-	N
children	TNode	-	children, same as `content`。Typescript：`string \| TNode`。see more ts definition	N
content	TNode	'default'	Typescript：`string \| TNode`。see more ts definition	N
format	String	HH:mm:ss	-	N
millisecond	Boolean	false	-	N
size	String	'medium'	options: small/medium/large	N
splitWithUnit	Boolean	false	-	N
theme	String	'default'	options: default/round/square	N
time	Number	0	required	Y
onChange	Function		Typescript：`(time: TimeData) => void` see more ts definition。 `interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`	N
onFinish	Function		Typescript：`() => void`	N

组件名	何时使用
标签	当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。
徽标	当需要展示特定对象的状态变化或承载运营性质提示时使用。