← 全部模板

信号时间线 <TraceTimeline />

历程画在一条发光“信号线”上,每个事件处一个波形尖峰和发光节点,文字上下交替,一束光沿线循环跑动。

在示例演示里查看 →

分组
背景 · 发展历程
组件
TraceTimeline · #trace-timeline
交互
每按一次 → 出现一个事件

适合

  • 4–7 个历史节点
  • 网络、通信、技术主题的历程页

不适合

  • 节点超过 7 个或每项要写很多:用 Timeline
  • 要表达时间长短:用 Gantt

内容上限

1events 4–7 个:date ≤ 10 个字符,title ≤ 10 字,note ≤ 26 字(7 个时 ≤ 18 字)

字段

字段类型
kicker · 必填string标题上方的小节名,2–8 字
title · 必填string | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
events · 必填{ date, title, note? }[]事件,每个一步

示例代码

<TraceTimeline kicker="历程" title="…" events={[{ date: '2009', title: '公司成立', note: '…' }, …]} />