Timeline
时间轴，用于对一系列信息进行时间排序时垂直展示。两种用法择一：传 dataSource 数据驱动（支持 content 属性及 Timeline.Item 全部属性），或在 children 内写 <Timeline.Item> 声明式。通过 mode 设置时间轴与内容的相对位置：left（默认）/right/center/alternate。
如何引入
import { Timeline, Timeline.Item } from '@chenzy-design/svelte';基本用法
在 children 内写 <Timeline.Item>，通过 time 设置时间文本。
- 第一个节点内容2019-07-14 10:35
- 第二个节点内容2019-06-13 16:17
- 第三个节点内容2019-05-14 18:34
节点类型
通过 type 设置节点类型，对应圆点变为相应颜色，可选：default / ongoing / success / warning / error。
- 审核中2019-07-14 10:35
- 发布成功2019-06-13 16:17
- 审核失败2019-05-14 18:34
自定义节点
通过 dot 自定义图标、color 自定义圆点色值；通过设置 children 样式可自定义节点样式。
- 默认样式的节点2019-07-14 10:35
- 自定义图标2019-06-13 16:17
- 自定义节点颜色2019-05-14 18:34
- 自定义节点样式2019-04-10 12:20
时间轴在左侧（默认）
通过 mode="left" 时间轴与内容排在左侧（默认）。
- 第一个节点内容节点辅助说明信息2019-07-14 10:35
- 第二个节点内容节点辅助说明信息2019-06-13 16:17
- 第三个节点内容节点辅助说明信息2019-05-14 18:34
- 第四个节点内容节点辅助说明信息2019-05-09 09:12
时间节点居中
通过 mode="center" 时间轴居中、时间文本在轴另一侧。
- 第一个节点内容节点辅助说明信息2019-07-14 10:35
- 第二个节点内容节点辅助说明信息2019-06-13 16:17
- 第三个节点内容节点辅助说明信息2019-05-14 18:34
- 第四个节点内容节点辅助说明信息2019-05-09 09:12
交替展现
通过 mode="alternate" 节点内容左右交替排列。
- 第一个节点内容节点辅助说明信息2019-07-14 10:35
- 第二个节点内容节点辅助说明信息2019-06-13 16:17
- 第三个节点内容节点辅助说明信息2019-05-14 18:34
- 第四个节点内容节点辅助说明信息2019-05-09 09:12
时间轴在右侧
通过 mode="right" 时间轴与内容排在右侧。
- 第一个节点内容节点辅助说明信息2019-07-14 10:35
- 第二个节点内容节点辅助说明信息2019-06-13 16:17
- 第三个节点内容节点辅助说明信息2019-05-14 18:34
- 第四个节点内容节点辅助说明信息2019-05-09 09:12
使用 dataSource
传入 dataSource 数组数据驱动，支持 content 属性及 Timeline.Item 的所有属性；content/dot 可为字符串或 Snippet。
- 第一个节点内容节点辅助说明信息2019-07-14 10:35
- 第二个节点内容节点辅助说明信息2019-06-13 16:17
- 第三个节点内容节点辅助说明信息2019-05-14 18:34
- 第四个节点内容节点辅助说明信息2019-05-09 09:12
可点击节点
通过 Timeline.Item 的 onClick 监听节点点击（Semi 无此 demo，补全交互场景）。
最近点击：（未点击）
- 创建服务现场2019-07-14 10:35
- 初步排除网络异常2019-06-13 16:17
- 技术测试异常2019-05-14 18:34
无障碍标签
通过 aria-label 为时间轴整体设置标签，圆点与连线均 aria-hidden（Semi 无此 demo，补全可访问性场景）。
- 创建服务现场2015-09-01
- 初步排除网络异常2015-09-02
- 技术测试异常2015-09-03
- 网络异常正在修复2015-09-05
API 参考
Timeline
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
mode | 通过设置 mode 可以改变时间轴和内容的相对位置 | 'left'|'right'|'center'|'alternate' | left |
class | 类名 | string | - |
style | 样式 | string | - |
dataSource | 时间轴数据源，支持 content 属性及 Timeline.Item 的所有属性 | TimelineItemData[] | - |
aria-label | 无障碍标签 | string | - |
children | 声明式用法：内嵌 <Timeline.Item> 列表（未传 dataSource 时生效） | Snippet | - |
Timeline.Item
时间轴单项，渲染节点圆点 / 连线 / 内容
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 类名 | string | - |
color | 自定义的圆圈色值 | string | - |
dot | 自定义时间轴点 | string | Snippet | - |
extra | 自定义辅助内容 | string | Snippet | - |
position | 自定义节点位置，可以覆盖 Timeline 的模式选项 | 'left'|'right' | - |
style | 样式 | string | - |
time | 时间文本 | string | Snippet | - |
type | 当前圆圈的模式 | 'default'|'ongoing'|'success'|'warning'|'error' | default |
onClick | 鼠标点击事件的回调 | (e: MouseEvent) => void | - |
children | 节点内容 | Snippet | - |
Accessibility
| ARIA role | list |
- ul/li 结构
- 时间点的连线以及时间点本身被设置了 aria-hidden，不会响应 Accessibility API
- 可通过传入 aria-label 设置 Timeline 组件的标签
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-motion-timeline-head-custom-transform | translate(-50%, -50%) | 时间轴自定义图标节点位移（Semi $motion-timeline_head_custom-transform） |