时间轴 - Semi Design Next

代码演示

如何引入

<script setup lang="ts">
    import { Timeline } from '@fibrous/semi-ui-vue';
</script>

Timeline.Item 也可以按名导入：TimelineItem。

基本用法

第一个节点内容
2019-07-14 10:35
第二个节点内容
2019-06-13 16:17
第三个节点内容
2019-05-14 18:34

代码

<script setup lang="ts">
    import { Timeline } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Timeline>
        <Timeline.Item>
            <template #time>2019-07-14 10:35</template>
            第一个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-06-13 16:17</template>
            第二个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-05-14 18:34</template>
            第三个节点内容
        </Timeline.Item>
    </Timeline>
</template>

节点类型

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

审核中
2019-07-14 10:35
发布成功
2019-06-13 16:17
审核失败
2019-05-14 18:34

代码

<script setup lang="ts">
    import { Timeline } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Timeline>
        <Timeline.Item type="ongoing">
            <template #time>2019-07-14 10:35</template>
            审核中
        </Timeline.Item>
        <Timeline.Item type="success">
            <template #time>2019-06-13 16:17</template>
            发布成功
        </Timeline.Item>
        <Timeline.Item type="error">
            <template #time>2019-05-14 18:34</template>
            审核失败
        </Timeline.Item>
    </Timeline>
</template>

自定义节点

可以通过 #dot 插槽自定义图标，color 自定义圆点色值。通过设置默认插槽内容的样式可以自定义节点样式。时间与辅助内容使用 #time、#extra 插槽。

默认样式的节点
2019-07-14 10:35
自定义图标
2019-06-13 16:17
自定义节点颜色
2019-05-14 18:34
自定义节点样式
2019-04-10 12:20

代码

<script setup lang="ts">
    import { IconAlertTriangle } from '@fibrous/semi-icons-vue';
    import { Timeline } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Timeline>
        <Timeline.Item>
            <template #time>2019-07-14 10:35</template>
            默认样式的节点
        </Timeline.Item>
        <Timeline.Item type="warning">
            <template #time>2019-06-13 16:17</template>
            <template #dot>
                <IconAlertTriangle />
            </template>
            自定义图标
        </Timeline.Item>
        <Timeline.Item color="pink">
            <template #time>2019-05-14 18:34</template>
            自定义节点颜色
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-04-10 12:20</template>
            <span :style="{ fontSize: '18px' }">自定义节点样式</span>
        </Timeline.Item>
    </Timeline>
</template>

时间轴位置

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

时间轴在左侧（默认）

第一个节点内容
节点辅助说明信息
2019-07-14 10:35
第二个节点内容
节点辅助说明信息
2019-06-13 16:17
第三个节点内容
节点辅助说明信息
2019-05-14 18:34
第四个节点内容
节点辅助说明信息
2019-05-09 09:12

代码

<script setup lang="ts">
    import { Timeline } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Timeline mode="left">
        <Timeline.Item>
            <template #time>2019-07-14 10:35</template>
            <template #extra>节点辅助说明信息</template>
            第一个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-06-13 16:17</template>
            <template #extra>节点辅助说明信息</template>
            第二个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-05-14 18:34</template>
            <template #extra>节点辅助说明信息</template>
            第三个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-05-09 09:12</template>
            <template #extra>节点辅助说明信息</template>
            第四个节点内容
        </Timeline.Item>
    </Timeline>
</template>

时间节点在左侧

第一个节点内容
节点辅助说明信息
2019-07-14 10:35
第二个节点内容
节点辅助说明信息
2019-06-13 16:17
第三个节点内容
节点辅助说明信息
2019-05-14 18:34
第四个节点内容
节点辅助说明信息
2019-05-09 09:12

代码

<script setup lang="ts">
    import { Timeline } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Timeline mode="center">
        <Timeline.Item>
            <template #time>2019-07-14 10:35</template>
            <template #extra>节点辅助说明信息</template>
            第一个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-06-13 16:17</template>
            <template #extra>节点辅助说明信息</template>
            第二个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-05-14 18:34</template>
            <template #extra>节点辅助说明信息</template>
            第三个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-05-09 09:12</template>
            <template #extra>节点辅助说明信息</template>
            第四个节点内容
        </Timeline.Item>
    </Timeline>
</template>

交替展现

交替只按实际渲染的子项计算，条件为假而没有渲染的子节点不占位。

第一个节点内容
节点辅助说明信息
2019-07-14 10:35
第二个节点内容
节点辅助说明信息
2019-06-13 16:17
第三个节点内容
节点辅助说明信息
2019-05-14 18:34
第四个节点内容
节点辅助说明信息
2019-05-09 09:12

代码

<script setup lang="ts">
    import { Timeline } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Timeline mode="alternate">
        <Timeline.Item>
            <template #time>2019-07-14 10:35</template>
            <template #extra>节点辅助说明信息</template>
            第一个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-06-13 16:17</template>
            <template #extra>节点辅助说明信息</template>
            第二个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-05-14 18:34</template>
            <template #extra>节点辅助说明信息</template>
            第三个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-05-09 09:12</template>
            <template #extra>节点辅助说明信息</template>
            第四个节点内容
        </Timeline.Item>
    </Timeline>
</template>

时间轴在右侧

第一个节点内容
节点辅助说明信息
2019-07-14 10:35
第二个节点内容
节点辅助说明信息
2019-06-13 16:17
第三个节点内容
节点辅助说明信息
2019-05-14 18:34
第四个节点内容
节点辅助说明信息
2019-05-09 09:12

代码

<script setup lang="ts">
    import { Timeline } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Timeline mode="right">
        <Timeline.Item>
            <template #time>2019-07-14 10:35</template>
            <template #extra>节点辅助说明信息</template>
            第一个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-06-13 16:17</template>
            <template #extra>节点辅助说明信息</template>
            第二个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-05-14 18:34</template>
            <template #extra>节点辅助说明信息</template>
            第三个节点内容
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2019-05-09 09:12</template>
            <template #extra>节点辅助说明信息</template>
            第四个节点内容
        </Timeline.Item>
    </Timeline>
</template>

使用 dataSource

dataSource 项的 content、time、extra 只接受字符串或数字；自定义内容使用作用域插槽 #content、#dot、#time、#extra，参数为 { item, index }。

第一个节点内容
节点辅助说明信息
2019-07-14 10:35
第二个节点内容
节点辅助说明信息
2019-06-13 16:17
第三个节点内容
节点辅助说明信息
2019-05-14 18:34
第四个节点内容
节点辅助说明信息
2019-05-09 09:12

代码

<script setup lang="ts">
    import { IconAlertTriangle } from '@fibrous/semi-icons-vue';
    import { Timeline, type TimelineData } from '@fibrous/semi-ui-vue';

    const dataSource: TimelineData[] = [
        {
            time: '2019-07-14 10:35',
            extra: '节点辅助说明信息',
            content: '第一个节点内容',
            type: 'ongoing',
        },
        {
            time: '2019-06-13 16:17',
            extra: '节点辅助说明信息',
            content: '第二个节点内容',
            color: 'pink',
        },
        {
            time: '2019-05-14 18:34',
            extra: '节点辅助说明信息',
            content: '第三个节点内容',
            type: 'warning',
        },
        {
            time: '2019-05-09 09:12',
            extra: '节点辅助说明信息',
            content: '第四个节点内容',
            type: 'success',
        },
    ];
</script>

<template>
    <Timeline :dataSource="dataSource" mode="alternate">
        <template #content="{ item, index }">
            <span v-if="index === 1" :style="{ fontSize: '18px' }">{{ item.content }}</span>
            <template v-else>{{ item.content }}</template>
        </template>
        <template #dot="{ index }">
            <IconAlertTriangle v-if="index === 2" />
        </template>
    </Timeline>
</template>

API 参考

TimeLine

Props

属性	说明	类型	默认值
mode	时间轴与内容的相对位置，可选 left、right、center、alternate。	`TimelineMode`	`semiDefault("Timeline", "mode", "left")`
dataSource	数据数组；非空时按数据渲染，忽略默认插槽。项的字段见下表。	`TimelineData[]`	`semiGlobalDefault("Timeline", "dataSource")`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
default	Timeline.Item 子项，dataSource 为空时使用。	`any`
content	dataSource 每一项的内容，缺省渲染 item.content。	`TimelineSlotProps`
dot	dataSource 每一项的自定义节点图标。	`TimelineSlotProps`
time	dataSource 每一项的时间，缺省渲染 item.time。	`TimelineSlotProps`
extra	dataSource 每一项的辅助说明，缺省渲染 item.extra。	`TimelineSlotProps`

Exposes

名称	说明	类型
无

class、style 与原生属性经 attrs 传入根元素 ul。

dataSource 项的字段：

字段	说明	类型	默认值
content	节点内容，自定义内容使用 `#content` 插槽	`string \| number`	-
time	时间文本，自定义内容使用 `#time` 插槽	`string \| number`	-
extra	辅助内容，自定义内容使用 `#extra` 插槽	`string \| number`	-
color	自定义的圆圈色值	`string`	-
type	当前圆圈的模式	`'default' \| 'ongoing' \| 'success' \| 'warning' \| 'error'`	`default`
position	自定义节点位置，可以覆盖 TimeLine 的模式选项	`'left' \| 'right'`	-
class	类名	`string`	-
style	样式	`StyleValue`	-
onClick	鼠标点击事件的回调	`(event: MouseEvent) => void`	-

TimeLine.Item

Props

属性	说明	类型	默认值
color	节点的颜色。	`string`	`undefined`
type	节点类型，可选 default、ongoing、success、warning、error。	`TimelineItemType`	`"default"`
position	覆盖 Timeline 的 mode，指定该项所在的一侧。	`TimelineItemPosition`	`undefined`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
default	节点内容。	`any`
dot	自定义节点图标。	`any`
time	时间。	`any`
extra	辅助说明。	`any`

Exposes

名称	说明	类型
无

class、style 与原生属性经 attrs 传入 li。点击事件写作 @click，点击 extra 区域不会触发。有 @click 时，内容区域带 role="button" 与 tabindex="0"，支持 Enter 和 Space。#dot、#time、#extra 插槽内容为空时不渲染对应容器。

Accessibility

ARIA

组件中时间点的连线以及时间点本身被设置了 aria-hidden，不会响应 Accessibility API
可以通过传入 aria-label 设置 TimeLine 组件的标签

<template>
    <Timeline aria-label="xx事故处理过程时间线">
        <Timeline.Item>
            <template #time>2015-09-01</template>
            创建服务现场
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2015-09-02</template>
            初步排除网络异常
        </Timeline.Item>
    </Timeline>
</template>

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$color-timeline_dot_default-bg-default	var(--semi-color-primary)	时间轴节点圆点背景色 - 进行中
$color-timeline_dot_success-bg-default	var(--semi-color-success)	时间轴节点圆点背景色 - 成功
$color-timeline_dot_warning-bg-default	var(--semi-color-warning)	时间轴节点圆点背景色 - 警告
$color-timeline_dot_error-bg-default	var(--semi-color-danger)	时间轴节点圆点背景色 - 错误
$color-timeline_dot_info-bg-default	var(--semi-color-tertiary-light-active)	时间轴节点圆点背景色 - 默认
$color-timeline_tail-border	var(--semi-color-text-3)	时间轴连线颜色
$color-timeline_time_default-text-default	var(--semi-color-text-2)	时间轴文字颜色 - 默认
$color-timeline_item_head-bg	transparent	时间轴头部背景颜色
$color-timeline_item_content-text-default	var(--semi-color-text-0)	时间轴标题文字颜色
$spacing-timeline-margin	$spacing-none	时间轴整体外边距
$spacing-timeline-padding	$spacing-tight	时间轴整体内边距
$spacing-timeline_tail-top	$spacing-base-loose	时间轴连线顶部位置
$spacing-timeline_tail-left	$spacing-extra-tight	时间轴连线左侧位置
$spacing-timeline_head-top	5px	时间轴节点圆点顶部位置
$spacing-timeline_head_custom-top	10px	时间轴自定义图标节点圆点顶部位置
$spacing-timeline_head_custom-left	5px	时间轴自定义图标节点圆点左侧位置
$spacing-timeline_content-marginLeft	25px	时间轴内容左侧外边距
$spacing-timeline_time-marginTop	$spacing-extra-tight	时间轴时间文本顶部外边距
$spacing-timeline_time-top	-2px	时间轴时间文本顶部位置
$spacing-timeline_item-margin	$spacing-none	时间轴各节点外边距
$spacing-timeline_item-paddingBottom	$spacing-loose	时间轴各节点底部外边距
$spacing-timeline_item_content_time-marginLeft	calc(-40px - 100%)	时间轴时间文本左侧外边距
$spacing-timeline_item_right_item-left	calc(100% - 9px)	时间轴在右侧时，各节点左侧位置
$spacing-timeline_item_right_item_content	$spacing-none	时间轴在右侧时，各节点内容外边距
$spacing-timeline_item_left_item_content-left	calc(50% - 4px)
$spacing-timeline_item_head_custom-left	50%
$spacing-timeline_item_head-marginLeft	-4px
$width-timeline	100%	时间轴整体宽度
$width-timeline_dot	9px	时间轴节点圆点宽度
$width-timeline_head_custom	auto	时间轴节点自定义图标宽度
$width-timeline_tail-border	$border-thickness-control	时间轴连线宽度
$width-timeline_head_custom-border	$border-thickness	时间轴自定义连线宽度
$width-timeline_item_content_time	100%	时间轴时间文本宽度
$width-timeline_item_right_content	calc(100% - 28px)
$width-timeline_item_left_item_content	calc(50% - 14px)
$width-timeline_item_right_item_content	calc(50% - 20px)
$height-timline_tail	calc(100% - 20px)	时间轴连线高度
$height-timeline_head_custom	auto	时间轴自定义连线高度
$radius-timeline_head	var(--semi-border-radius-circle)	时间轴节点圆点圆角
$radius-timeline_head_custom	0	时间轴节点自定义图标圆角
$motion-timeline_head_custom-transform	translate(-50%, -50%)
$motion-timeline_head_custom-transform-rtl	translate(50%, -50%)