翻牌板 <SplitFlap />
机场翻牌板:每行日期、可选时间、事件和状态,翻牌逐字翻到终值;每行是一个 build 步骤。
Template and style descriptions are currently available in Chinese only.
- Group
- 时间线 · 3–6 个时刻
- Component
SplitFlap·#split-flap- Interaction
- build 模式下每按一次 → 翻出一行
Good for
- 有准确时刻的日程、任务时间线
- 发车、发布、上线这类“到点”的事件
Avoid when
- 事件需要长说明:用 Timeline
- 超过 6 行:拆页
Content limits
| 1 | title ≤ 16 字 |
| 2 | rows 3–6 行:time 和 at 各正好 5 个字符,label ≤ 8 字或 ≤ 14 个拉丁字符,status ≤ 4 字 |
| 3 | heads 每项 ≤ 6 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题 |
heads | string[] | 列名 |
rows · required | { time, at?, label, status }[] | 行 |
source | string | 事实出处 |
Example
<SplitFlap kicker="时刻表" title="…" heads={['日期', '时间 UTC', '事件', '状态']} rows={[{ time: '07-16', at: '13:32', label: '土星五号发射', status: '起飞' }, …]} />