Vertical display timeline.
// works when >=5.2.0, recommended ✅const items = [{ children: 'sample', label: 'sample' }];return <Timeline items={items} />;// works when <5.2.0, deprecated when >=5.2.0 🙅🏻♀️return (<Timeline onChange={onChange}><Timeline.Item>Sample</Timeline.Item></Timeline>);
Basic timeline.
import React from 'react';
import { Timeline } from 'antd';
const App: React.FC = () => (
<Timeline
items={[
{
children: 'Create a services site 2015-09-01',
},
{
children: 'Solve initial network problems 2015-09-01',
},
{
children: 'Technical testing 2015-09-01',
},
{
children: 'Network problems being solved 2015-09-01',
},
]}
/>
);
export default App;
When the timeline is incomplete and ongoing, put a ghost node at last. Set pending as truthy value to enable displaying pending item. You can customize the pending content by passing a React Element. Meanwhile, pendingDot={a React Element} is used to customize the dot of the pending item. reverse={true} is used for reversing nodes.
import React, { useState } from 'react';
import { Button, Timeline } from 'antd';
const App: React.FC = () => {
const [reverse, setReverse] = useState(false);
const handleClick = () => {
setReverse(!reverse);
};
return (
<div>
<Timeline
pending="Recording..."
reverse={reverse}
items={[
{
children: 'Create a services site 2015-09-01',
},
{
children: 'Solve initial network problems 2015-09-01',
},
{
children: 'Technical testing 2015-09-01',
},
]}
/>
<Button type="primary" style={{ marginTop: 16 }} onClick={handleClick}>
Toggle Reverse
</Button>
</div>
);
};
export default App;
Set a node as an icon or other custom element.
import React from 'react';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';
const App: React.FC = () => (
<Timeline
items={[
{
children: 'Create a services site 2015-09-01',
},
{
children: 'Solve initial network problems 2015-09-01',
},
{
dot: <ClockCircleOutlined className="timeline-clock-icon" />,
color: 'red',
children: 'Technical testing 2015-09-01',
},
{
children: 'Network problems being solved 2015-09-01',
},
]}
/>
);
export default App;
.timeline-clock-icon {
font-size: 16px;
}Use label show time alone.
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Radio, Timeline } from 'antd';
const App: React.FC = () => {
const [mode, setMode] = useState<'left' | 'alternate' | 'right'>('left');
const onChange = (e: RadioChangeEvent) => {
setMode(e.target.value);
};
return (
<>
<Radio.Group
onChange={onChange}
value={mode}
style={{
marginBottom: 20,
}}
>
<Radio value="left">Left</Radio>
<Radio value="right">Right</Radio>
<Radio value="alternate">Alternate</Radio>
</Radio.Group>
<Timeline
mode={mode}
items={[
{
label: '2015-09-01',
children: 'Create a services',
},
{
label: '2015-09-01 09:12:11',
children: 'Solve initial network problems',
},
{
children: 'Technical testing',
},
{
label: '2015-09-01 09:12:11',
children: 'Network problems being solved',
},
]}
/>
</>
);
};
export default App;
Set the color of circles. green means completed or success status, red means warning or error, and blue means ongoing or other default status, gray for unfinished or disabled status.
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';
const App: React.FC = () => (
<Timeline
items={[
{
color: 'green',
children: 'Create a services site 2015-09-01',
},
{
color: 'green',
children: 'Create a services site 2015-09-01',
},
{
color: 'red',
children: (
<>
<p>Solve initial network problems 1</p>
<p>Solve initial network problems 2</p>
<p>Solve initial network problems 3 2015-09-01</p>
</>
),
},
{
children: (
<>
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</>
),
},
{
color: 'gray',
children: (
<>
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</>
),
},
{
color: 'gray',
children: (
<>
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</>
),
},
{
color: '#00CCFF',
dot: <SmileOutlined />,
children: <p>Custom color testing</p>,
},
]}
/>
);
export default App;
Alternate timeline.
import React from 'react';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';
const App: React.FC = () => (
<Timeline
mode="alternate"
items={[
{
children: 'Create a services site 2015-09-01',
},
{
children: 'Solve initial network problems 2015-09-01',
color: 'green',
},
{
dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
children: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.`,
},
{
color: 'red',
children: 'Network problems being solved 2015-09-01',
},
{
children: 'Create a services site 2015-09-01',
},
{
dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
children: 'Technical testing 2015-09-01',
},
]}
/>
);
export default App;
Right alternate timeline.
import React from 'react';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';
const App: React.FC = () => (
<Timeline
mode="right"
items={[
{
children: 'Create a services site 2015-09-01',
},
{
children: 'Solve initial network problems 2015-09-01',
},
{
dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
color: 'red',
children: 'Technical testing 2015-09-01',
},
{
children: 'Network problems being solved 2015-09-01',
},
]}
/>
);
export default App;
| Property | Description | Type | Default |
|---|---|---|---|
| mode | By sending alternate the timeline will distribute the nodes to the left and right | left | alternate | right | - |
| pending | Set the last ghost node's existence or its content | boolean | ReactNode | false |
| pendingDot | Set the dot of the last ghost node when pending is true | ReactNode | <LoadingOutlined /> |
| reverse | Whether reverse nodes or not | boolean | false |
| items | Each node of timeline | Items[] | 5.2.0 |
Node of timeline.
| Property | Description | Type | Default |
|---|---|---|---|
| color | Set the circle's color to blue, red, green, gray or other custom colors | string | blue |
| dot | Customize timeline dot | ReactNode | - |
| label | Set the label | ReactNode | - |
| children | Set the content | ReactNode | - |
| position | Customize node position | left | right | - |
Solve initial network problems 1
Solve initial network problems 2
Solve initial network problems 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Custom color testing