← 所有版型

进度卡 <ProgressCards />

每张卡一个圆环、一个大百分比、标签、进度条和一句说明；每按一次 → 一张卡的圆环和进度条填满到数值。

版型與風格的說明目前僅提供簡體中文。

在範例簡報中查看 →

分組: 数据 · 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）" />