- 分组
- 数据 · 2–4 个百分比
- 组件
ProgressCards·#progress-cards- 交互
- build: reveal 时每步填满一张卡
适合
- 2–4 个 0–100 的比例：完成度、回收率、占比
- 每个数字要配一句解释
不适合
- 数值不是百分比或会超过 100：用 StatRow
- 要比较很多项：用 BarChart
内容上限
| 1 | cards 2–4 张 |
| 2 | label ≤ 10 字；display ≤ 6 个字符；note ≤ 30 字 |
| 3 | value 0–100 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
cards · 必填 | { label, value, display?, note }[] | value 决定圆环和进度条 |
示例代码
<ProgressCards kicker="回收" title="美国的纸，回收了多少" cards={[{ label: '纸和纸板总体', value: 68.2, note: '…' }, …]} source="US EPA（2018）" />