生命周期轨道 <LifecycleRail />
一条刻度轨道上有 3–5 站，一个标记块每步移到下一站，站点卡片同时落下。
Template and style descriptions are currently available in Chinese only.
- Group
- 流程 · 一个东西随时间换位置
- Component
LifecycleRail·#lifecycle-rail- Interaction
- build: reveal 时第一站先显示，之后每步移到下一站；完整状态标记停在最后一站
Good for
- 数据、订单、文档随时间在几个状态间移动
- 每一站有明确的时间点
Avoid when
- 多条并行线：用 Swimlane
- 只是历史年份：用 Timeline
Content limits
| 1 | stops 3–5 站 |
| 2 | at ≤ 8 个字符；title ≤ 12 个拉丁字符或 ≤ 8 字；body ≤ 32 字 |
| 3 | marker ≤ 10 个拉丁字符 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
stops · required | { at, title, body }[] | 从左到右 |
marker · required | string | 移动标记块上的字 |
Example
<LifecycleRail kicker="生命周期" title="…" marker="report.csv" stops={[{ at: '第 0 天', title: 'Standard', body: '…' }, …]} />