- 分組
- 分级 · 从热到冷 3–5 档
- 元件
TierLadder·#tier-ladder- 互動
- build: reveal 时每步放下一级
適合
- 存储层级、服务档位、价格档这类有序分级
- 每档 2–3 个相同的参数
不適合
- 档位之间没有顺序：用 PanelCards
- 要买哪一档：用 PricingTiers
內容上限
| 1 | steps 3–5 级 |
| 2 | name ≤ 14 个拉丁字符或 ≤ 8 字；tag ≤ 6 字 |
| 3 | specs 2–3 项：label ≤ 4 字，value ≤ 8 字 |
| 4 | ends 各 ≤ 6 字 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
steps · 必填 | { name, tag?, specs: { label, value }[] }[] | 从上到下 |
ends | [string, string] | 两端标签 |
範例程式碼
<TierLadder kicker="存储类" title="…" ends={['常用', '归档']} steps={[{ name: 'Standard', tag: '默认', specs: [{ label: '取回', value: '毫秒级' }] }, …]} source="…" />