Components
    Show · Timeline

    Timeline

    Timeline component is used to display a series of information vertically.

    Demos

    How to import

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

    Timeline.Item can also be imported by name as TimelineItem.

    Basic Usage

    • 第一个节点内容
      2019-07-14 10:35
    • 第二个节点内容
      2019-06-13 16:17
    • 第三个节点内容
      2019-05-14 18:34
    Code
    <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

    You can use type to set the type of a time node, using one of: default,ongoing, success, warning, Error. The corresponding dot will have a corresponding color.

    • 审核中
      2019-07-14 10:35
    • 发布成功
      2019-06-13 16:17
    • 审核失败
      2019-05-14 18:34
    Code
    <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>

    Custom node

    You can use the #dot slot to customize icon, color to customize color or style the default slot content. Time and extra content use the #time and #extra slots.

    • 默认样式的节点
      2019-07-14 10:35
    • 自定义图标
      2019-06-13 16:17
    • 自定义节点颜色
      2019-05-14 18:34
    • 自定义节点样式
      2019-04-10 12:20
    Code
    <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>

    Timeline Position

    Use mode to set the position of the timeline, using one of: left, center, alternate, right.

    Left (default)

    • 第一个节点内容
      节点辅助说明信息
      2019-07-14 10:35
    • 第二个节点内容
      节点辅助说明信息
      2019-06-13 16:17
    • 第三个节点内容
      节点辅助说明信息
      2019-05-14 18:34
    • 第四个节点内容
      节点辅助说明信息
      2019-05-09 09:12
    Code
    <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>

    Center

    • 第一个节点内容
      节点辅助说明信息
      2019-07-14 10:35
    • 第二个节点内容
      节点辅助说明信息
      2019-06-13 16:17
    • 第三个节点内容
      节点辅助说明信息
      2019-05-14 18:34
    • 第四个节点内容
      节点辅助说明信息
      2019-05-09 09:12
    Code
    <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>

    Alternate

    Items alternate by the children actually rendered: a child that is not rendered because its condition is false takes no position.

    • 第一个节点内容
      节点辅助说明信息
      2019-07-14 10:35
    • 第二个节点内容
      节点辅助说明信息
      2019-06-13 16:17
    • 第三个节点内容
      节点辅助说明信息
      2019-05-14 18:34
    • 第四个节点内容
      节点辅助说明信息
      2019-05-09 09:12
    Code
    <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
    Code
    <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

    content, time and extra of a dataSource item only take a string or number. Use the scoped slots #content, #dot, #time and #extra for custom content, with { item, index } as the parameters.

    • 第一个节点内容
      节点辅助说明信息
      2019-07-14 10:35
    • 第二个节点内容
      节点辅助说明信息
      2019-06-13 16:17
    • 第三个节点内容
      节点辅助说明信息
      2019-05-14 18:34
    • 第四个节点内容
      节点辅助说明信息
      2019-05-09 09:12
    Code
    <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 reference

    TimeLine

    Props

    PropertyDescriptionTypeDefault
    modePosition of the timeline relative to the content: left, right, center or alternate.TimelineModesemiDefault("Timeline", "mode", "left")
    dataSourceData array. When it is not empty the items are rendered from it and the default slot is ignored. See the item fields below.TimelineData[]semiGlobalDefault("Timeline", "dataSource")

    Events

    EventDescriptionCallback parameters
    None

    Slots

    SlotDescriptionScope parameters
    defaultTimeline.Item children, used when dataSource is empty.any
    contentContent of each dataSource item. Defaults to item.content.TimelineSlotProps
    dotCustom dot of each dataSource item.TimelineSlotProps
    timeTime of each dataSource item. Defaults to item.time.TimelineSlotProps
    extraExtra content of each dataSource item. Defaults to item.extra.TimelineSlotProps

    Exposes

    NameDescriptionType
    None

    class, style and native attributes are passed through attrs to the root ul.

    Fields of a dataSource item:

    FieldInstructiontypeDefault
    contentItem content; use the #content slot for custom contentstring | number-
    timeTime value; use the #time slot for custom contentstring | number-
    extraExtra content; use the #extra slot for custom contentstring | number-
    colorColor of dotstring-
    typePattern of dot'default' | 'ongoing' | 'success' | 'warning' | 'error'default
    positionCustom node location to override TimeLine's mode setting'left' | 'right'-
    classClass namestring-
    styleInline styleStyleValue-
    onClickClick event(event: MouseEvent) => void-

    TimeLine.Item

    Props

    PropertyDescriptionTypeDefault
    colorColor of the dot.stringundefined
    typeDot type: default, ongoing, success, warning or error.TimelineItemType"default"
    positionOverrides the mode of the Timeline for this item.TimelineItemPositionundefined

    Events

    EventDescriptionCallback parameters
    None

    Slots

    SlotDescriptionScope parameters
    defaultItem content.any
    dotCustom dot content.any
    timeTime.any
    extraExtra content.any

    Exposes

    NameDescriptionType
    None

    class, style and native attributes are passed through attrs to the li. Listen to clicks with @click; clicks in the extra area do not trigger it. With @click, the content area has role="button" and tabindex="0" and responds to Enter and Space. A container is not rendered when its #dot, #time or #extra slot is empty.

    Accessibility

    ARIA

    • The element of dot and line between dots in TimeLine have a aria-hidden, indicates that they do not support Accessibility API.
    • Supporting API aria-label to specify TimeLine's label.
    <template>
    <Timeline aria-label="Accident timeline">
        <Timeline.Item>
            <template #time>2015-09-01</template>
            Accident started
        </Timeline.Item>
        <Timeline.Item>
            <template #time>2015-09-01</template>
            Process
        </Timeline.Item>
    </Timeline>
</template>

    Design Tokens

    These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.
    Sass variableValueUsage
    $color-timeline_dot_default-bg-defaultvar(--semi-color-primary)时间轴节点圆点背景色 - 进行中
    $color-timeline_dot_success-bg-defaultvar(--semi-color-success)时间轴节点圆点背景色 - 成功
    $color-timeline_dot_warning-bg-defaultvar(--semi-color-warning)时间轴节点圆点背景色 - 警告
    $color-timeline_dot_error-bg-defaultvar(--semi-color-danger)时间轴节点圆点背景色 - 错误
    $color-timeline_dot_info-bg-defaultvar(--semi-color-tertiary-light-active)时间轴节点圆点背景色 - 默认
    $color-timeline_tail-bordervar(--semi-color-text-3)时间轴连线颜色
    $color-timeline_time_default-text-defaultvar(--semi-color-text-2)时间轴文字颜色 - 默认
    $color-timeline_item_head-bgtransparent时间轴头部背景颜色
    $color-timeline_item_content-text-defaultvar(--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-top5px时间轴节点圆点顶部位置
    $spacing-timeline_head_custom-top10px时间轴自定义图标节点圆点顶部位置
    $spacing-timeline_head_custom-left5px时间轴自定义图标节点圆点左侧位置
    $spacing-timeline_content-marginLeft25px时间轴内容左侧外边距
    $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-marginLeftcalc(-40px - 100%)时间轴时间文本左侧外边距
    $spacing-timeline_item_right_item-leftcalc(100% - 9px)时间轴在右侧时，各节点左侧位置
    $spacing-timeline_item_right_item_content$spacing-none时间轴在右侧时，各节点内容外边距
    $spacing-timeline_item_left_item_content-leftcalc(50% - 4px)
    $spacing-timeline_item_head_custom-left50%
    $spacing-timeline_item_head-marginLeft-4px
    $width-timeline100%时间轴整体宽度
    $width-timeline_dot9px时间轴节点圆点宽度
    $width-timeline_head_customauto时间轴节点自定义图标宽度
    $width-timeline_tail-border$border-thickness-control时间轴连线宽度
    $width-timeline_head_custom-border$border-thickness时间轴自定义连线宽度
    $width-timeline_item_content_time100%时间轴时间文本宽度
    $width-timeline_item_right_contentcalc(100% - 28px)
    $width-timeline_item_left_item_contentcalc(50% - 14px)
    $width-timeline_item_right_item_contentcalc(50% - 20px)
    $height-timline_tailcalc(100% - 20px)时间轴连线高度
    $height-timeline_head_customauto时间轴自定义连线高度
    $radius-timeline_headvar(--semi-border-radius-circle)时间轴节点圆点圆角
    $radius-timeline_head_custom0时间轴节点自定义图标圆角
    $motion-timeline_head_custom-transformtranslate(-50%, -50%)
    $motion-timeline_head_custom-transform-rtltranslate(50%, -50%)