COMPONENT 71 · Data Display

时间线

Timeline

也叫Activity StreamEvent Timeline时间轴

按时间顺序排列事件，并强调先后关系。

Arranges events chronologically and emphasizes their sequence over time.

ANATOMY & USAGE

结构与使用建议

组成部分

时间标记
连接线
事件内容

适合使用

事件顺序和时间间隔是理解内容的关键时。

不建议使用

用户更需要按字段比较或事件没有明确时间时。

键盘与无障碍

使用有序列表和可读时间元素；视觉连线设为装饰，顺序不能只靠位置表达。

DESCRIBE IT TO AI

这样告诉编程助手

实现时间线（Timeline）：按时间顺序排列事件，并强调先后关系。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<ol class="demo stack">
  <li>
    <time datetime="2026-07-14T10:00">10:00</time> 创建任务</li>
  <li>
    <time datetime="2026-07-14T11:30">11:30</time> 完成设计</li>
  <li>
    <time datetime="2026-07-14T14:00">14:00</time> 发布</li>
</ol>