Home Explore Help
Register Sign In
Apq
/
semi-design
mirror of https://github.com/DouyinFE/semi-design.git
1
0
Fork 0
Files Issues 0 Wiki
Branch: fix/table-resize
Branches Tags
semi-design
/
content
/
show
/
timeline
/
index-en-US.md

index-en-US.md 8.7 KB
Permalink History Raw

localeCode: en-US order: 65 category: Show title: Timeline subTitle: Timeline icon: doc-timeline

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

Demos

How to import

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

Basic Usage

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

() => (
    <Timeline>
        <Timeline.Item time='2019-07-14 10:35'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34'>Third Node Content</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.

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

() => (
    <Timeline>
        <Timeline.Item time='2019-07-14 10:35' type='ongoing'>Processing</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' type='success'>Succeed</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' type='error'>Failed</Timeline.Item>
    </Timeline>
);

Custom node

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

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

() => (
    <Timeline>
        <Timeline.Item time='2019-07-14 10:35'>Default Style</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' dot={(<IconAlertTriangle />)} type='warning'>Customized Icon</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' color='pink'>Customized Color</Timeline.Item>
        <Timeline.Item time='2019-04-10 12:20'><span style={{ fontSize: '18px' }}>Customized Node Style</span></Timeline.Item>
    </Timeline>
);

Timeline Position

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

Left (default)

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

() => (
    <Timeline mode='left'>
        <Timeline.Item time='2019-07-14 10:35' extra='Extra Information'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
    </Timeline>
);

Center

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

() => (
    <Timeline mode='center'>
        <Timeline.Item time='2019-07-14 10:35' extra='Extra Information'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
    </Timeline>
);

Alternate

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

() => (
    <Timeline mode='alternate'>
        <Timeline.Item time='2019-07-14 10:35' extra='Extra Information'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
    </Timeline>
);

Right

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

() => (
    <Timeline mode='right'>
        <Timeline.Item time='2019-07-14 10:35' extra='Extra Information'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
    </Timeline>
);

DataSource

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

() => (
    <Timeline 
        mode='alternate' 
        dataSource={[
            {
                time: '2019-07-14 10:35',
                extra: 'Extra Information',
                content: 'First Node Content',
                type: 'ongoing',
            },
            {
                time: '2019-06-13 16:17',
                extra: 'Extra Information',
                content: <span style={{ fontSize: '18px' }}>Second Node Content</span>,
                color: 'pink',
            },
            {
                time: '2019-05-14 18:34',
                extra: 'Extra Information',
                dot: <IconAlertTriangle />,
                content: 'Third Node Content',
                type: 'warning',
            },
            {
                time: '2019-05-09 09:12',
                extra: 'Extra Information',
                content: 'Forth Node Content',
                type: 'success',
            }    
        ]} 
    />
);

API reference

TimeLine

Properties Instruction type Default
className Class name string -
mode The relative Position of the timeline and content left|right|center|alternate left
style Inline style CSSProperties -
dataSource DataSource array for Timeline v>=1.16.0, Support content attribute and all attributes of TimeLine.Item array -

TimeLine.Item

Properties Instruction type Default Version
className Class name string - -
color Color of dot string - -
dot Custom dot React Node - -
extra Custom extra content React Node - -
position Custom node location to override TimeLine's mode setting left|right - -
style Inline style CSSProperties - -
time Time value string - -
type Pattern of dot default|ongoing|success|warning|error default -
onClick Click event (e: MouseEvent) => void - 2.2.0

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