时间线
Timeline
别名:按时间排的记录活动时间轴事件进展记录activity timeline
这是什么
沿时间顺序组织事件的展示组件，通过时间、节点和内容说明事件之间的先后关系。它适合展示活动日志、项目进展或订单状态。时间线呈现已经发生或计划发生的事件，而步骤条强调需要用户完成的任务阶段；当事件可展开时，应保留事件标题和时间，避免用户失去位置。
交互实验室
试一试，再决定怎么用展开一个事件查看详情，然后切换顺序，观察展开状态是否仍属于同一事件。
正在加载实验室…
使用时关注什么
- 01切换顺序不改变事件与详情的对应关系。
- 02折叠后仍保留时间和标题，按钮可被键盘操作。
✓ 适用场景
- 项目事件、订单流转和操作记录。
- 需要理解先后关系的叙事内容。
✕ 不适用场景
- 只需显示一个当前状态时使用徽标。
- 需要精确比较数值时使用表格或图表。
常见形式
连线时间轴
Connected
节点与连线强调事件顺序。
事件卡片
Event cards
独立卡片容纳较长事件描述。
实现要点
border-inline-startposition: relativedisplay: grid用有序列表表达顺序，真实业务时间用 time 与 datetime。展开入口用按钮和 aria-expanded，排序改变时保留当前展开事件的稳定 ID。节点与连线只是装饰，不替代文字状态。