代码演示 ​

如何引入 ​

jsx
import { Timeline } from '@kousum/semi-ui-vue';

基本用法 ​

节点类型 ​

通过 type 可以设置节点类型，对应原点会变成相应的颜色，可选：default，ongoing， success， warning， error。

自定义节点 ​

可以通过 dot 自定义图标，color 自定义圆点色值。通过设置 children 的样式可以自定义节点样式。

时间轴位置 ​

通过 mode 属性可以设置时间的位置，共有 4 种模式可选：left， center， alternate， right。

时间轴在左侧（默认） ​

时间节点在左侧 ​

交替展现 ​

时间轴在右侧 ​

使用 dataSource ​

API 参考 ​

TimeLine ​

属性说明类型默认值
className类名string-
mode通过设置 mode 可以改变时间轴和内容的相对位置left|right|center|alternateleft
style样式CSSProperties-
dataSource时间轴数据源 v>=1.16.0，支持 content 属性及 TimeLine.Item 的所有属性array-

TimeLine.Item ​

属性说明类型默认值版本
className类名string--
color自定义的圆圈色值string--
dot自定义时间轴点ReactNode--
extra自定义辅助内容ReactNode--
position自定义节点位置，可以覆盖 TimeLine 的模式选项left|right--
style样式CSSProperties--
time时间文本string--
type当前圆圈的模式default|ongoing|success|warning|errordefault-
onClick鼠标点击事件的回调(e: MouseEvent) => void-2.2.0

Accessibility ​

ARIA ​

  • 组件中时间点的连线以及时间点本身被设置了 aria-hidden，不会响应 Accessibility API
  • 可以通过传入 aria-label 设置 TimeLine 组件的标签
text
<Timeline aria-label="xx事故处理过程时间线">
    <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
    <Timeline.Item time="2015-09-02">初步排除网络异常</Timeline.Item>
    <Timeline.Item time="2015-09-03">技术测试异常</Timeline.Item>
    <Timeline.Item time="2015-09-05">网络异常正在修复</Timeline.Item>
</Timeline>

设计变量 ​