Ant Design

⌘ K

5.21.3

Timeline

Vertical display timeline.

가져오기import{ Timeline }from"antd";

소스components/timeline

문서

이 페이지 수정 변경 로그

Ant Design

⌘ K

5.21.3

Timeline

Vertical display timeline.

가져오기import{ Timeline }from"antd";

소스components/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.

Upgrade Tip

After version 5.2.0, we provide a simpler usage <Timeline items={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.

// 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>
);

Examples

API

Common props ref：Common props

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

Items

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`	-

Design Token

컴포넌트 토큰어떻게 사용하나요?

토큰 이름	설명	타입	기본값
dotBg	节点背景色	string	#ffffff
dotBorderWidth	节点边框宽度	string \| number	2
itemPaddingBottom	时间项下间距	number	20
tailColor	轨迹颜色	string	rgba(5, 5, 5, 0.06)
tailWidth	轨迹宽度	string \| number	2

글로벌 토큰어떻게 사용하나요?

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.

Upgrade Tip

After version 5.2.0, we provide a simpler usage <Timeline items={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.

// 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>
);

Examples

API

Common props ref：Common props

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

Items

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`	-

Design Token

컴포넌트 토큰어떻게 사용하나요?

토큰 이름	설명	타입	기본값
dotBg	节点背景色	string	#ffffff
dotBorderWidth	节点边框宽度	string \| number	2
itemPaddingBottom	时间项下间距	number	20
tailColor	轨迹颜色	string	rgba(5, 5, 5, 0.06)
tailWidth	轨迹宽度	string \| number	2

글로벌 토큰어떻게 사용하나요?

Basic

Last node and Reversing

Last node and Reversing

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

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Recording...

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

LeftRightAlternate

2015-09-01
Create a services
2015-09-01 09:12:11
Solve initial network problems
Technical testing
2015-09-01 09:12:11
Network problems being solved

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

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

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

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

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