使用import { Timeline } from "antd"; |
5.2.0 版本之后，我们提供了更简单的用法 <Timeline items={[...]} /> 以获得更好的性能，使您能在应用中编写更简单的代码。
与此同时，我们弃用了旧的用法，并且将在下一个 major 版本中删除它。
// >=5.2.0 可用，推荐的写法 ✅const items = [{ children: 'sample', label: 'sample' }];return <Timeline items={items} />;// <5.2.0 可用，>=5.2.0 时不推荐 🙅🏻♀️return (<Timeline onChange={onChange}><Timeline.Item>Sample</Timeline.Item></Timeline>);
基本的时间轴。
当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 pending 为真值时展示幽灵节点，如果 pending 是 React 元素可用于定制该节点内容，同时 pendingDot 将可以用于定制其轴点。reverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。
可以设置为图标或其他自定义元素。
使用 label 标签单独展示时间。
Solve initial network problems 1
Solve initial network problems 2
Solve initial network problems 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Custom color testing
圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态，灰色表示未完成或失效状态。
内容在时间轴两侧轮流出现。
时间轴点可以在内容的右边。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| mode | 通过设置 mode 可以改变时间轴和内容的相对位置 | left | alternate | right | - | |
| pending | 指定最后一个幽灵节点是否存在或内容 | ReactNode | false | |
| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | ReactNode | <LoadingOutlined /> | |
| reverse | 节点排序 | boolean | false | |
| items | 选项配置 | Items[] | - | 5.2.0 |
时间轴的每一个节点。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | 指定圆圈颜色 blue、red、green、gray，或自定义的色值 | string | blue |
| dot | 自定义时间轴点 | ReactNode | - |
| label | 设置标签 | ReactNode | - |
| children | 设置内容 | ReactNode | - |
| position | 自定义节点位置 | left | right | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| dotBg | 节点背景色 | string | #ffffff |
| dotBorderWidth | 节点边框宽度 | string | number | 2 |
| itemPaddingBottom | 时间项下间距 | number | 20 |
| tailColor | 轨迹颜色 | string | rgba(5,5,5,0.06) |
| tailWidth | 轨迹宽度 | string | number | 2 |
