Timeline

Demos

How to import

import { Timeline } from '@fibrous/semi-ui-react';

Basic Usage

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

Code

import { Timeline } from '@fibrous/semi-ui-react';

export default function TimelineDemo() {
    return (
        <Timeline>
            <Timeline.Item time="2019-07-14 10:35">第一个节点内容</Timeline.Item>
            <Timeline.Item time="2019-06-13 16:17">第二个节点内容</Timeline.Item>
            <Timeline.Item time="2019-05-14 18:34">第三个节点内容</Timeline.Item>
        </Timeline>
    );
}

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

import { Timeline } from '@fibrous/semi-ui-react';

export default function TimelineDemo() {
    return (
        <Timeline>
            <Timeline.Item time="2019-07-14 10:35" type="ongoing">
                审核中
            </Timeline.Item>
            <Timeline.Item time="2019-06-13 16:17" type="success">
                发布成功
            </Timeline.Item>
            <Timeline.Item time="2019-05-14 18:34" type="error">
                审核失败
            </Timeline.Item>
        </Timeline>
    );
}

Custom node

You can use dot to customize icon, color to customize color or pass in children with style.

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

Code

import { IconAlertTriangle } from '@fibrous/semi-icons-react';
import { Timeline } from '@fibrous/semi-ui-react';

export default function TimelineDemo() {
    return (
        <Timeline>
            <Timeline.Item time="2019-07-14 10:35">默认样式的节点</Timeline.Item>
            <Timeline.Item time="2019-06-13 16:17" dot={<IconAlertTriangle />} type="warning">
                自定义图标
            </Timeline.Item>
            <Timeline.Item time="2019-05-14 18:34" color="pink">
                自定义节点颜色
            </Timeline.Item>
            <Timeline.Item time="2019-04-10 12:20">
                <span style={{ fontSize: '18px' }}>自定义节点样式</span>
            </Timeline.Item>
        </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

import { Timeline } from '@fibrous/semi-ui-react';

export default function TimelineDemo() {
    return (
        <Timeline mode="left">
            <Timeline.Item time="2019-07-14 10:35" extra="节点辅助说明信息">
                第一个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-06-13 16:17" extra="节点辅助说明信息">
                第二个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-05-14 18:34" extra="节点辅助说明信息">
                第三个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-05-09 09:12" extra="节点辅助说明信息">
                第四个节点内容
            </Timeline.Item>
        </Timeline>
    );
}

Center

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

Code

import { Timeline } from '@fibrous/semi-ui-react';

export default function TimelineDemo() {
    return (
        <Timeline mode="center">
            <Timeline.Item time="2019-07-14 10:35" extra="节点辅助说明信息">
                第一个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-06-13 16:17" extra="节点辅助说明信息">
                第二个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-05-14 18:34" extra="节点辅助说明信息">
                第三个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-05-09 09:12" extra="节点辅助说明信息">
                第四个节点内容
            </Timeline.Item>
        </Timeline>
    );
}

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

import { Timeline } from '@fibrous/semi-ui-react';

export default function TimelineDemo() {
    return (
        <Timeline mode="alternate">
            <Timeline.Item time="2019-07-14 10:35" extra="节点辅助说明信息">
                第一个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-06-13 16:17" extra="节点辅助说明信息">
                第二个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-05-14 18:34" extra="节点辅助说明信息">
                第三个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-05-09 09:12" extra="节点辅助说明信息">
                第四个节点内容
            </Timeline.Item>
        </Timeline>
    );
}

Right

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

Code

import { Timeline } from '@fibrous/semi-ui-react';

export default function TimelineDemo() {
    return (
        <Timeline mode="right">
            <Timeline.Item time="2019-07-14 10:35" extra="节点辅助说明信息">
                第一个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-06-13 16:17" extra="节点辅助说明信息">
                第二个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-05-14 18:34" extra="节点辅助说明信息">
                第三个节点内容
            </Timeline.Item>
            <Timeline.Item time="2019-05-09 09:12" extra="节点辅助说明信息">
                第四个节点内容
            </Timeline.Item>
        </Timeline>
    );
}

DataSource

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

Code

import { IconAlertTriangle } from '@fibrous/semi-icons-react';
import { Timeline } from '@fibrous/semi-ui-react';

export default function TimelineDemo() {
    return (
        <Timeline
            mode="alternate"
            dataSource={[
                {
                    time: '2019-07-14 10:35',
                    extra: '节点辅助说明信息',
                    content: '第一个节点内容',
                    type: 'ongoing',
                },
                {
                    time: '2019-06-13 16:17',
                    extra: '节点辅助说明信息',
                    content: <span style={{ fontSize: '18px' }}>第二个节点内容</span>,
                    color: 'pink',
                },
                {
                    time: '2019-05-14 18:34',
                    extra: '节点辅助说明信息',
                    dot: <IconAlertTriangle />,
                    content: '第三个节点内容',
                    type: 'warning',
                },
                {
                    time: '2019-05-09 09:12',
                    extra: '节点辅助说明信息',
                    content: '第四个节点内容',
                    type: 'success',
                },
            ]}
        />
    );
}

API reference

Props

Property	Description	Type	Default
children	Timeline items, usually `Timeline.Item`. Ignored when dataSource is not empty.	`React.ReactNode`	-
className	Class name of the root `ul` element.	`string`	-
dataSource	Data array. When it is not empty, the items are rendered from it and children are ignored. Each item takes the Timeline.Item props, with `content` as its content.	`Data[]`	-
mode	Position of the timeline relative to the content: `left`, `right`, `center` or `alternate`.	`'left' \| 'right' \| 'center' \| 'alternate'`	`"left"`
ref	Reference to the root `ul` element.	`Type`	-
style	Style of the root `ul` element.	`React.CSSProperties`	-

Other native attributes, such as id and aria-label, are passed to the root ul element.

TimeLine.Item

Props

Property	Description	Type	Default
children	Content of the item.	`React.ReactNode`	-
className	Class name of the root `li` element.	`string`	-
color	Background color of the dot, overriding the color of type.	`string`	-
dot	Custom dot content, replacing the default dot.	`React.ReactNode`	-
extra	Extra content, not rendered when empty. Clicks in this area do not trigger onClick.	`React.ReactNode`	-
position	Overrides the mode of the Timeline for this item: `left` or `right`.	`'left' \| 'right'`	-
ref	Reference to the root `li` element.	`Type`	-
style	Style of the root `li` element.	`React.CSSProperties`	-
time	Time text, not rendered when empty.	`React.ReactNode`	`""`
type	Dot type: `default`, `ongoing`, `success`, `warning` or `error`.	`'default' \| 'ongoing' \| 'success' \| 'warning' \| 'error'`	`"default"`

Other native attributes, such as id, are passed to the root li element. onClick is the click event of the li, receiving a MouseEvent. With onClick, the content area has role="button" and tabIndex 0 and responds to Enter and Space.

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.

<Timeline aria-label="Accident timeline">
    <Timeline.Item time="2015-09-01">Accident started</Timeline.Item>
    <Timeline.Item time="2015-09-01">Process</Timeline.Item>
</Timeline>

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%)