数字滚轮 <Odometer />
1–3 个大数字,每一位像里程表一样滚到终值;数字下有标签和一行说明。DOM 里始终是真实的终值文字,滚轮只是叠在上面的装饰。
版型與風格的說明目前僅提供簡體中文。
- 分組
- 数据 · 1–3 个大数字
- 元件
Odometer·#odometer- 互動
- 每个数字是一个 build 步骤,出现时滚动到终值
適合
- 少数几个需要“数出来”的大数字
- 距离、人数、时长这类量级数字
不適合
- 数字之间要比较大小:用 BarChart
- 超过 3 个数字:用 StatRow
內容上限
| 1 | title ≤ 18 字 |
| 2 | stats 1–3 个:value ≤ 7 个字符,unit ≤ 4 个字符,label ≤ 12 字,note ≤ 28 字 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 小节名,2–8 字 |
title · 必填 | string | string[] | 标题 |
stats · 必填 | { value, unit?, label, note? }[] | 数字 |
source | string | 事实出处 |
範例程式碼
<Odometer kicker="三个数字" title="远、久、看的人多" stats={[{ value: '384,400', unit: 'km', label: '地月平均距离' }, …]} />