← All templates

信号时间线 <TraceTimeline />

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

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
背景 · 发展历程
Component
TraceTimeline · #trace-timeline
Interaction
每按一次 → 出现一个事件

Good for

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

Avoid when

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

Content limits

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

Fields

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

Example

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