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|alternateleftstyle 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|errordefault- 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>