- 分组
- 构成 · 费用由哪几项组成
- 组件
MeterCards·#meter-cards- 交互
- build: reveal 时每步出现一张
适合
- 讲清楚账单由哪几部分组成
- 每项有明确的计量单位
不适合
- 要给出金额和比例：用 Waterfall 或 ShareBar
- 要比较套餐：用 PricingTiers
内容上限
| 1 | cards 3–5 张 |
| 2 | name ≤ 8 字；unit ≤ 8 个字符；note ≤ 40 字 |
| 3 | unitLabel ≤ 4 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
cards · 必填 | { icon, name, unit, note }[] | 每个维度一张 |
unitLabel | string | 单位上方小字，默认“计量” |
示例代码
<MeterCards kicker="怎么计费" title="…" cards={[{ icon: 'database', name: '存储', unit: 'GB·月', note: '…' }, …]} source="…" />