跳到主要内容

Timeline 时间线Timeline

按时间先后排列的一串事件：订单跟踪、操作记录、发布历史。表示“流程走到哪一步”请用 Steps。

基本用法

每个条目有标题、可选的时间和说明。节点之间用一条细线连起来。

  1. 已签收
    本人签收，感谢使用。
  2. 派送中
    快递员周师傅正在派送。
  3. 到达上海转运中心
  4. 已发货

颜色与图标

tone 给节点上色，icon 把圆点换成图标。颜色之外，标题文字本身要说清发生了什么。

  1. 部署成功
    v2.4.0 已上线，耗时 3 分 12 秒。
  2. 构建告警
    包体积比上一版大了 12%。
  3. 测试失败
    2 个用例未通过，已自动重试。
  4. 周屿 推送了 3 个提交
  5. 创建了发布分支
  6. 计划发布

接口

Timeline

属性类型默认值说明
items*TimelineEntry[]—事件列表，按显示顺序。
...restHTMLAttributes<HTMLOListElement>—其余原生属性透传到 ol，建议给 aria-label。

TimelineEntry

属性类型默认值说明
title*ReactNode—事件标题。
descriptionReactNode—标题下的说明。
timeReactNode—时间文字。
dateTimestring—机器可读的时间，写进 time 元素的 dateTime。
tone'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info''neutral'节点颜色。
iconReactNode—替换圆点的图标。
keystring—列表会增删时给一个稳定的 key。

无障碍

  • 渲染成有序列表 ol，读屏会报出“列表，共 N 项”和每项的序号。
  • 时间用 time 元素；写的是“今天”“昨天”这类相对时间时，请同时给 dateTime。
  • 节点（圆点、图标、连线）都是装饰，对读屏隐藏；所以标题不能省略状态（写“测试失败”而不是只靠红色）。
  • 不可聚焦，没有键盘操作；说明里的链接、按钮按文档顺序 Tab 到。