Timeline

Demos

How to import

<script lang="ts">
    import { Timeline } from '@fibrae/semi-ui-svelte';
</script>

Basic Usage

The Svelte version has no Timeline.Item: write every node in dataSource. time, extra and content are strings or numbers, and type and color style the dot.

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

Code

<script lang="ts">
    import { Timeline, type TimelineData } from '@fibrae/semi-ui-svelte';

    const dataSource: TimelineData[] = [
        { time: '2019-07-14 10:35', content: '第一个节点内容' },
        { time: '2019-06-13 16:17', content: '第二个节点内容' },
        { time: '2019-05-14 18:34', content: '第三个节点内容' },
    ];
</script>

<Timeline {dataSource} />

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 lang="ts">
    import { Timeline, type TimelineData } from '@fibrae/semi-ui-svelte';

    const dataSource: TimelineData[] = [
        { time: '2019-07-14 10:35', content: '审核中', type: 'ongoing' },
        { time: '2019-06-13 16:17', content: '发布成功', type: 'success' },
        { time: '2019-05-14 18:34', content: '审核失败', type: 'error' },
    ];
</script>

<Timeline {dataSource} />

Custom node

You can use the dot snippet of a dataSource item to customize the icon of that node and color to customize the dot color; nodes without dot draw the default circle. Style the node content through the content snippet. Use the time and extra snippets for the time and the extra content; both take the parameter { item, index }.

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

Code

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

    const dataSource: TimelineData[] = [
        { time: '2019-07-14 10:35', content: '默认样式的节点' },
        { time: '2019-06-13 16:17', content: '自定义图标', type: 'warning', dot: warningDot },
        { time: '2019-05-14 18:34', content: '自定义节点颜色', color: 'pink' },
        { time: '2019-04-10 12:20', content: '自定义节点样式' },
    ];
</script>

{#snippet warningDot()}<IconAlertTriangle />{/snippet}

<Timeline {dataSource}>
    {#snippet content({ item, index })}
        {#if index === 3}
            <span style="font-size: 18px">{item.content}</span>
        {:else}
            {item.content}
        {/if}
    {/snippet}
</Timeline>

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 lang="ts">
    import { Timeline, type TimelineData } from '@fibrae/semi-ui-svelte';

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

<Timeline {dataSource} mode="left" />

Center

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

Code

<script lang="ts">
    import { Timeline, type TimelineData } from '@fibrae/semi-ui-svelte';

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

<Timeline {dataSource} mode="center" />

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 lang="ts">
    import { Timeline, type TimelineData } from '@fibrae/semi-ui-svelte';

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

<Timeline {dataSource} mode="alternate" />

Right

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

Code

<script lang="ts">
    import { Timeline, type TimelineData } from '@fibrae/semi-ui-svelte';

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

<Timeline {dataSource} mode="right" />

DataSource

content, time and extra of a dataSource item accept only strings or numbers. For custom rendering, use the snippets content, time and extra, called with { item, index }; for a custom dot, set the dot snippet of the item, which takes no argument.

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

Code

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

    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',
            dot: warningDot,
        },
        {
            time: '2019-05-09 09:12',
            extra: '节点辅助说明信息',
            content: '第四个节点内容',
            type: 'success',
        },
    ];
</script>

{#snippet warningDot()}<IconAlertTriangle />{/snippet}

<Timeline {dataSource} mode="alternate">
    {#snippet content({ item, index })}
        {#if index === 1}
            <span style="font-size: 18px">{item.content}</span>
        {:else}
            {item.content}
        {/if}
    {/snippet}
</Timeline>

API reference

Props

Property	Description	Type	Default
content	Snippet for the content of each dataSource item, with the parameter `{ item, index }`. Defaults to item.content.	`Type`	-
dataSource	Data array the items are rendered from. See the item fields below; `dot` is the snippet of a custom dot for that item, and the default circle is drawn when unset.	`TimelineData[]`	-
extra	Snippet for the extra content of each dataSource item, with the parameter `{ item, index }`. Defaults to item.extra.	`Type`	-
mode	Position of the timeline relative to the content: left, right, center or alternate.	`TimelineMode`	`"left"`
time	Snippet for the time of each dataSource item, with the parameter `{ item, index }`. Defaults to item.time.	`Type`	-

class, style (a string) and native attributes such as id and aria-label are passed to the root ul.

Fields of a dataSource item:

Field	Description	Type	Default
content	Node content; use the `content` snippet for custom content	`string \| number`	-
time	Time text; use the `time` snippet for custom content	`string \| number`	-
extra	Extra content; use the `extra` snippet for custom content	`string \| number`	-
dot	Custom dot; the default circle is drawn when unset	`Snippet`	-
color	Custom color of the dot	`string`	-
type	Mode of the dot	`'default' \| 'ongoing' \| 'success' \| 'warning' \| 'error'`	`default`
position	Custom position of the node, overriding the mode of TimeLine	`'left' \| 'right'`	-
onClick	Called when the node is clicked, with a `MouseEvent`; clicks in the `extra` area do not trigger it	`(event: MouseEvent) => void`	-
class	Class name of the `li`	`ClassValue`	-
style	Style string of the `li`	`string`	-

TimeLine.Item

The Svelte version has no TimeLine.Item: a node is an item of dataSource, with the fields in the table above. class, style and other li attributes are written in the item and land on the li. With onClick, the content area has role="button" and tabindex="0" and responds to Enter and Space. A container is not rendered when its time or extra 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.

<script lang="ts">
    import { Timeline } from '@fibrae/semi-ui-svelte';

    const dataSource = [
        { time: '2015-09-01', content: 'Accident started' },
        { time: '2015-09-01', content: 'Process' },
    ];
</script>

<Timeline aria-label="Accident timeline" {dataSource} />

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 variable	Value	Usage
$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%)