mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity
5d9cb2e50d
ant-design/components/timeline/index.en-US.md
afc163 e027cbec1c
docs: format all markdown (#38629) 
* chore: add prettier-ignore in markdown demo

* docs: format markdown api table

* docs: format markdown api table
2022-11-17 17:31:26 +08:00

1.8 KiB
Raw Blame History

category group title cover demo
Components Data Display Timeline https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
cols
2

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

Basic Color Last node and Reversing Alternate Custom Right alternate Label

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 -