Timeline 时间线
按时间顺序展示事件的列表
用法
基础
color 设置节点的语义色。
示例加载中...
后台审计流程
权限编排面板中，时间线记录授权步骤，active 标出当前步骤。
示例加载中...
最佳实践
- 状态写进
title或默认插槽，color只作视觉辅助。 - 步骤流里只把一个当前事件标为
active。 - 短里程碑序列用
layout="horizontal"；审计日志和长历史保持纵向。 time保持简短，同一条时间线内格式一致。- 密集的时间线只给异常或关键状态加
icon。
API 参考
TxTimeline
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| layout | 布局方向，同步到所有子项。 |
插槽
| 插槽 | 参数 | 说明 |
|---|---|---|
default | - | 时间线条目。 |
TxTimelineItem
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | - | 条目标题。 | |
| time | - | 时间文本。 | |
| color | 节点的语义色。 | ||
| icon | - | 节点图标。 | |
| active | 高亮当前事件的条目与节点。 |
插槽
| 插槽 | 参数 | 说明 |
|---|---|---|
default | - | 标题与时间下方的事件说明。 |
概述
TxTimeline为role="list"，每个TxTimelineItem为role="listitem"。layout经 provide / inject 传给子项，子项无需各自设置。- 节点圆点与图标带
aria-hidden，读屏只读到标题、时间与说明。
技术实现
- 源码：
packages/tuffex/packages/components/src/timeline/。
查看源码
packages/tuffex/packages/components/src/timeline/index.ts