- 分组
- 时间 · 周期与路线图
- 组件
Timeline·#timeline- 交互
- 分段依次生长；“今天”与倒计时在每次打开时按当前日期计算，演示不会过期。
适合
- 支持周期、合同期限、版本路线图、项目阶段
- 想让听众意识到“还剩多久”
不适合
- 只有一个日期：放进 Cover 的 facts
- 超过 3 行：拆成两页
- 事件是离散的点而不是区间：用 StepTrack
内容上限
| 1 | rows 1–3 行；有 countdowns 时 ≤ 2 行 |
| 2 | 每行 segments 首尾相接，1–3 段 |
| 3 | 段内 label 要比段短：一年长的段 ≤ 6 字 |
| 4 | countdowns ≤ 3 个 |
| 5 | 轴两端各留约半年空白 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
axis · 必填 | { from: 'YYYY-MM-DD', to: 'YYYY-MM-DD' } | 可见范围，年份刻度自动生成 |
rows · 必填 | TimelineRow[] | name, code?, segments[{ from, to, label?, tone }], planned? |
legend · 必填 | { ink, accent } | 两种色调的图例文字 |
today | boolean | 是否画“今天”线与过去斜纹，默认 true |
countdowns | { label, until, note? }[] | 图下方的剩余月数 |
示例代码
<Timeline
kicker="支持周期"
title="birch 已转入 LTS"
axis={{ from: '2023-01-01', to: '2031-01-01' }}
legend={{ ink: '常规安全支持', accent: 'LTS 长期支持' }}
rows={[{
name: 'Lumen 12', code: 'birch',
segments: [
{ from: '2023-06-10', to: '2026-07-12', label: '常规安全支持', tone: 'ink' },
{ from: '2026-07-12', to: '2028-06-30', label: 'LTS', tone: 'accent' },
],
}]}
countdowns={[{ label: 'birch 剩余维护', until: '2028-06-30' }]}
source="wiki.example.org/LTS"
/>