Skip to content

Timeline 时间线

按时间展示事件顺序。清晰呈现业务事实、状态和变化。

实时示例

LIVE · TimelineElement Plus / sunui
  • Agent 完成初步分类
    14:28
  • 客户补充复现步骤
    13:46
  • 工单创建
    11:20
Vue 示例
<el-timeline />

使用规则

应该

先保证扫描与比较效率,再增加视觉强调;必须定义加载、空和错误状态。

避免

不要通过局部硬编码改变品牌色、圆角或状态语义;不要隐藏必要的操作反馈。

状态与变体

  • 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
  • 加载、空、错误状态按业务影响选用,不用品牌强调色表达错误。
  • 紧凑尺寸只用于高密度后台场景,触控目标仍应满足可操作要求。

基础用法

<el-timeline>时间线</el-timeline>

设计变量

color.background.surfacecolor.text.secondaryspacing.mdshadow.sm

无障碍

状态同时使用文字;图片提供替代文本;复杂数据结构支持键盘浏览。