计量卡 <MeterCards />
3–5 张卡片，每张写一个计费或计量维度，单位用大号字放在“表盘”里，下面一句说明。
Template and style descriptions are currently available in Chinese only.
- Group
- 构成 · 费用由哪几项组成
- Component
MeterCards·#meter-cards- Interaction
- build: reveal 时每步出现一张
Good for
- 讲清楚账单由哪几部分组成
- 每项有明确的计量单位
Avoid when
- 要给出金额和比例：用 Waterfall 或 ShareBar
- 要比较套餐：用 PricingTiers
Content limits
| 1 | cards 3–5 张 |
| 2 | name ≤ 8 字；unit ≤ 8 个字符；note ≤ 40 字 |
| 3 | unitLabel ≤ 4 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
cards · required | { icon, name, unit, note }[] | 每个维度一张 |
unitLabel | string | 单位上方小字，默认“计量” |
Example
<MeterCards kicker="怎么计费" title="…" cards={[{ icon: 'database', name: '存储', unit: 'GB·月', note: '…' }, …]} source="…" />