Timeline时间轴
Timeline
时间轴
垂直展示的时间流信息。
使用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>);
代码演示
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- Technical testing 2015-09-01
- Network problems being solved 2015-09-01
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- Technical testing 2015-09-01
- Recording...
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- Technical testing 2015-09-01
- Network problems being solved 2015-09-01
- 2015-09-01Create a services
- 2015-09-01 09:12:11Solve initial network problems
- Technical testing
- 2015-09-01 09:12:11Network problems being solved
- Create a services site 2015-09-01
- Create a services site 2015-09-01
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
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
- Network problems being solved 2015-09-01
- Create a services site 2015-09-01
- Technical testing 2015-09-01
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- Technical testing 2015-09-01
- Network problems being solved 2015-09-01
API
通用属性参考:通用属性
Timeline
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
mode | 通过设置 mode 可以改变时间轴和内容的相对位置 | left | alternate | right | - | |
pending | 指定最后一个幽灵节点是否存在或内容 | ReactNode | false | |
pendingDot | 当最后一个幽灵节点存在時,指定其时间图点 | ReactNode | <LoadingOutlined /> | |
reverse | 节点排序 | boolean | false | |
items | 选项配置 | Items[] | - | 5.2.0 |
Items
时间轴的每一个节点。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
color | 指定圆圈颜色 blue、red、green、gray,或自定义的色值 | string | blue |
dot | 自定义时间轴点 | ReactNode | - |
label | 设置标签 | ReactNode | - |
children | 设置内容 | ReactNode | - |
position | 自定义节点位置 | left | right | - |
主题变量(Design Token)
组件 Token如何定制?
Token 名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
dotBg | 节点背景色 | string | #ffffff |
dotBorderWidth | 节点边框宽度 | string | number | 2 |
itemPaddingBottom | 时间项下间距 | number | 20 |
tailColor | 轨迹颜色 | string | rgba(5,5,5,0.06) |
tailWidth | 轨迹宽度 | string | number | 2 |