Components
    Show · Timeline

    Timeline

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

    Demos

    How to import

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

    Basic Usage

    • 第一个节点内容
      2019-07-14 10:35
    • 第二个节点内容
      2019-06-13 16:17
    • 第三个节点内容
      2019-05-14 18:34
    Code
    import { Timeline } from '@fibrous/semi-ui-solid';

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-solid';

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-solid';
import { Timeline } from '@fibrous/semi-ui-solid';

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={{ 'font-size': '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-solid';

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-solid';

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-solid';

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>
    );
}
    • 第一个节点内容
      节点辅助说明信息
      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-solid';

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

    content, time and extra of a dataSource item accept only strings or numbers. For custom rendering, pass renderContent, renderDot, renderTime and renderExtra, called with (item, index).

    • 第一个节点内容
      节点辅助说明信息
      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-solid';
import { Timeline, type TimelineData } from '@fibrous/semi-ui-solid';

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',
    },
];

const renderContent = (item: TimelineData, index: number) => (index === 1 ? <span style={{ 'font-size': '18px' }}>{item.content}</span> : item.content);

const renderDot = (_: TimelineData, index: number) => (index === 2 ? <IconAlertTriangle /> : undefined);

export default function TimelineDemo() {
    return <Timeline mode="alternate" dataSource={dataSource} renderContent={renderContent} renderDot={renderDot} />;
}

    API reference

    TimeLine

    Props

    PropertyDescriptionTypeDefault
    dataSourceData array. When it is not empty the items are rendered from it and the children are ignored. See the item fields below.Data[]-
    modePosition of the timeline relative to the content: left, right, center or alternate.TimelineMode"left"
    renderContentRenders the content of each dataSource item, called with (item, index); defaults to item.content.Type(item: Data, index: number) => JSX.Element-
    renderDotRenders the custom dot of each dataSource item, called with (item, index).Type(item: Data, index: number) => JSX.Element-
    renderExtraRenders the extra content of each dataSource item, called with (item, index); defaults to item.extra.Type(item: Data, index: number) => JSX.Element-
    renderTimeRenders the time of each dataSource item, called with (item, index); defaults to item.time.Type(item: Data, index: number) => JSX.Element-

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

    Fields of a dataSource item:

    FieldInstructiontypeDefault
    contentItem content; custom rendering uses renderContentstring | number-
    timeTime value; custom rendering uses renderTimestring | number-
    extraExtra content; custom rendering uses renderExtrastring | 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 styleJSX.CSSProperties | string-
    onClickClick eventJSX.EventHandlerUnion<HTMLLIElement, MouseEvent>-

    TimeLine.Item

    Props

    PropertyDescriptionTypeDefault
    colorColor of the dot, used as its background and overriding the color of type.string-
    dotCustom dot content, replacing the default dot.JSX.Element-
    extraExtra content, not rendered when empty.JSX.Element-
    positionOverrides the mode of the Timeline for this item: left or right.'left' | 'right'-
    timeTime text, not rendered when empty.JSX.Element-
    typeDot type: default, ongoing, success, warning or error.'default' | 'ongoing' | 'success' | 'warning' | 'error'-

    class, style, ref and native attributes are passed to the li. Listen to clicks with onClick; clicks in the extra area do not trigger it. 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.
    <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 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%)