- 分组
- 时间线 · 3–6 个时刻
- 组件
SplitFlap·#split-flap- 交互
- build 模式下每按一次 → 翻出一行
适合
- 有准确时刻的日程、任务时间线
- 发车、发布、上线这类“到点”的事件
不适合
- 事件需要长说明：用 Timeline
- 超过 6 行：拆页
内容上限
| 1 | title ≤ 16 字 |
| 2 | rows 3–6 行：time 和 at 各正好 5 个字符，label ≤ 8 字或 ≤ 14 个拉丁字符，status ≤ 4 字 |
| 3 | heads 每项 ≤ 6 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名，2–8 字 |
title · 必填 | string | string[] | 标题 |
heads | string[] | 列名 |
rows · 必填 | { time, at?, label, status }[] | 行 |
source | string | 事实出处 |
示例代码
<SplitFlap kicker="时刻表" title="…" heads={['日期', '时间 UTC', '事件', '状态']} rows={[{ time: '07-16', at: '13:32', label: '土星五号发射', status: '起飞' }, …]} />