时间轴Timeline
内容与数据展示按时间顺序展示一连串事件
时间轴适合物流、审批记录和更新日志。使用前要统一最新事件放在上方还是下方,并用文字说明时间与状态;颜色和圆点只负责辅助识别。
包裹已签收07-20 14:32
运输中07-19 09:15
已下单07-18 20:02
什么时候用
- 物流 / 订单进度:已下单 → 已发货 → 已签收已签收 · 今天 14:32运输中 · 昨天 09:15已下单 · 前天 20:02
- 审批 / 操作记录:谁在什么时候做了什么oil-oil 通过了审批林小hu 提交了审批创建了审批单
- 更新日志:版本记录按时间排开v2.4 新增暗色模式v2.3 修复 12 个问题v2.2 上线协作功能
- 节点有成败状态,用颜色区分开部署成功构建中…测试失败
组成结构 · Anatomy
包裹已签收07-20 14:32
1时间轴Timeline轴线 + 一串节点的容器
2节点圆点Dot颜色表状态:成功 / 进行中 / 等待
3节点内容Content这一步发生了什么
4时间戳Timestamp具体到分钟更好
常见变体 · Variants
基础竖排Vertical
已发货07-19 09:15
已下单07-18 20:02
默认款,事件多就竖着往下排
状态色Status
部署成功
构建中…
测试失败
节点带成败结果,颜色一眼区分
水平式Horizontal
立项03-01
设计04-10
开发进行中
上线待定
节点少、横向空间够,看整体进度
典型使用场景
物流跟踪
运单 SF1024888运输中
运输中 · 深圳南山转运中心今天 09:15
已揽收 · 杭州余杭网点昨天 20:02
已下单昨天 18:40
审批流转记录
请假审批 · 3 天年假已通过
林小hu 提交申请07-20 09:30
版本更新日志
更新日志
v2.4.0 最新2026-07-18 · 新增暗色模式、组件搜索
v2.3.22026-06-30 · 修复 12 个已知问题
v2.3.02026-06-12 · 上线团队协作功能
项目里程碑
新版官网 · 里程碑开发中
立项
03-01
设计
04-10
开发
进行中
上线
待定