Timeline
Vertical display timeline.
When To Use#
When a series of information needs to be ordered by time (ascending or descending).
When you need a timeline to make a visual connection.
Examples
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- Technical testing 2015-09-01
- Network problems being solved 2015-09-01
TypeScript
JavaScript
import { Timeline } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
);
export default App;
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- Technical testing 2015-09-01
- Recording...
TypeScript
JavaScript
import { Button, Timeline } from 'infrad';
import React, { useState } from 'react';
const App: React.FC = () => {
const [reverse, setReverse] = useState(false);
const handleClick = () => {
setReverse(!reverse);
};
return (
<div>
<Timeline pending="Recording..." reverse={reverse}>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
</Timeline>
<Button type="primary" style={{ marginTop: 16 }} onClick={handleClick}>
Toggle Reverse
</Button>
</div>
);
};
export default App;
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- Technical testing 2015-09-01
- Network problems being solved 2015-09-01
TypeScript
JavaScript
import { ITimeOutlined } from 'infra-design-icons';
import { Timeline } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ITimeOutlined className="timeline-clock-icon" />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
);
export default App;
.timeline-clock-icon {
font-size: 16px;
}
[data-theme='compact'] .timeline-clock-icon {
font-size: 14px;
}
- 2015-09-01Create a services
- 2015-09-01 09:12:11Solve initial network problems
- Technical testing
- 2015-09-01 09:12:11Network problems being solved
TypeScript
JavaScript
import type { RadioChangeEvent } from 'infrad';
import { Radio, Timeline } from 'infrad';
import React, { useState } from 'react';
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}>
<Timeline.Item label="2015-09-01">Create a services</Timeline.Item>
<Timeline.Item label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
<Timeline.Item>Technical testing</Timeline.Item>
<Timeline.Item label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
</Timeline>
</>
);
};
export default App;
- Create a services site 2015-09-01
- Create a services site 2015-09-01
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
TypeScript
JavaScript
import { SmileOutlined } from 'infra-design-icons';
import { Timeline } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<Timeline>
<Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item color="red">
<p>Solve initial network problems 1</p>
<p>Solve initial network problems 2</p>
<p>Solve initial network problems 3 2015-09-01</p>
</Timeline.Item>
<Timeline.Item>
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</Timeline.Item>
<Timeline.Item color="gray">
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</Timeline.Item>
<Timeline.Item color="gray">
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</Timeline.Item>
<Timeline.Item color="#00CCFF" dot={<SmileOutlined />}>
<p>Custom color testing</p>
</Timeline.Item>
</Timeline>
);
export default App;
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- 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.
- Network problems being solved 2015-09-01
- Create a services site 2015-09-01
- Technical testing 2015-09-01
TypeScript
JavaScript
import { ITimeOutlined } from 'infra-design-icons';
import { Timeline } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<Timeline mode="alternate">
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ITimeOutlined style={{ fontSize: '16px' }} />}>
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.
</Timeline.Item>
<Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ITimeOutlined style={{ fontSize: '16px' }} />}>
Technical testing 2015-09-01
</Timeline.Item>
</Timeline>
);
export default App;
- Create a services site 2015-09-01
- Solve initial network problems 2015-09-01
- Technical testing 2015-09-01
- Network problems being solved 2015-09-01
TypeScript
JavaScript
import { ClockCircleOutlined } from 'infra-design-icons';
import { Timeline } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<Timeline mode="right">
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
);
export default App;
API#
<Timeline>
<Timeline.Item>step1 2015-09-01</Timeline.Item>
<Timeline.Item>step2 2015-09-01</Timeline.Item>
<Timeline.Item>step3 2015-09-01</Timeline.Item>
<Timeline.Item>step4 2015-09-01</Timeline.Item>
</Timeline>
Timeline#
Timeline
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 |
Timeline.Item#
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 | - |
position | Customize node position | left | right | - |