zent
Version:
一套前端设计语言和基于React的实现
46 lines (36 loc) • 2.82 kB
Markdown
---
title: Timeline
subtitle: 时间轴
path: component/timeline
group: 信息展示
---
## Timeline
## API
### Timeline
| 参数 | 说明 | 类型 | 默认值 | 备选值 | 可选 |
| --------- | -------------- | ------ | -------------- | --------------------------- | ---- |
| type | 水平或垂直 | string | `'horizontal'` | `'horizontal' | 'vertical'` | 是 |
| size | 大小 | number | | | 是 |
| timeline | 时间轴数组 | Array | | 是 | 是 |
| className | 自定义额外类名 | string | `''` | | 是 |
| style | 自定义样式 | object | | | 是 |
### Timeline Item
| 参数 | 说明 | 类型 | 默认值 | 备选值 | 可选 |
| --------- | ----------------------------------- | ------- | -------------- | --------------------------- | ---- |
| label | 标签 | node | | | 是 |
| tip | hover 时的弹层提示 | node | | | 是 |
| color | 颜色,优先于`lineColor`和`dotColor` | string | | | 是 |
| lineColor | 线颜色 | string | `#999` | | 是 |
| dotColor | 圆点颜色 | string | `#00B90E` | | 是 |
| type | 水平或垂直 | string | `'horizontal'` | `'horizontal' | 'vertical'` | 是 |
| showLabel | 是否显示标签 | boolean | `true` | `true | false` | 是 |
| showDot | 是否显示圆点 | boolean | `true` | `true | false` | 是 |
| size | 大小 | number | | | 是 |
| className | 自定义额外类名 | string | `''` | | 是 |
| style | 自定义样式 | object | | | 是 |
### Timeline 数组
支持`Timeline Item`的全部字段
| 额外字段 | 说明 | 类型 | 可选 |
| -------- | ---------------------------------------- | ------ | ---- |
| id | 默认的`key`,若没有会采用数组下标为`key` | string | 是 |
| percent | 动态大小时占用的比例(0 <= percent <= 1) | number | 是 |