- 分组
- 流程 · 一个东西随时间换位置
- 组件
LifecycleRail·#lifecycle-rail- 交互
- build: reveal 时第一站先显示，之后每步移到下一站；完整状态标记停在最后一站
适合
- 数据、订单、文档随时间在几个状态间移动
- 每一站有明确的时间点
不适合
- 多条并行线：用 Swimlane
- 只是历史年份：用 Timeline
内容上限
| 1 | stops 3–5 站 |
| 2 | at ≤ 8 个字符；title ≤ 12 个拉丁字符或 ≤ 8 字；body ≤ 32 字 |
| 3 | marker ≤ 10 个拉丁字符 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
stops · 必填 | { at, title, body }[] | 从左到右 |
marker · 必填 | string | 移动标记块上的字 |
示例代码
<LifecycleRail kicker="生命周期" title="…" marker="report.csv" stops={[{ at: '第 0 天', title: 'Standard', body: '…' }, …]} />