| category | group | title | subtitle | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|---|
Components |
数据展示 |
Timeline |
时间轴 |
垂直展示的时间流信息。 |
|
- 当有一系列信息需按时间排列时，可正序和倒序。
- 需要有一条时间轴进行视觉上的串联时。
:::info{title="升级提示"}
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>
);基本用法
圆圈颜色
最后一个及排序
交替展现
自定义时间轴点
右侧时间轴点
标签
线框风格
组件 Token
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 |
- |