Importimport { Timeline } from "antd"; |
Sourcecomponents/timeline |
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| items | Each node of timeline | Items[] | - | |
| mode | By sending alternate the timeline will distribute the nodes to the left and right | start | alternate | end | start | |
| orientation | Set the direction of the timeline | vertical | horizontal | vertical | |
Set the last ghost node's existence or its content. Use item.loading instead | ReactNode | false | ||
Set the dot of the last ghost node when pending is true. Use item.icon instead | ReactNode | <LoadingOutlined /> | ||
| reverse | Whether reverse nodes or not | boolean | false | |
| titleSpan | Set the title span space. It is the distance to the center of the dot | number | string | 12 | |
| variant | Config style variant | filled | outlined | outlined |
Node of timeline.
| Property | Description | Type | Default |
|---|---|---|---|
| color | Set the circle's color to blue, red, green, gray or other custom colors | string | blue |
| content | Set the content | ReactNode | - |
Set the content. Use content instead | ReactNode | - | |
Customize timeline dot. Use icon instead | ReactNode | - | |
| icon | Customize node icon | ReactNode | - |
Set the label. Use title instead | ReactNode | - | |
| loading | Set loading state | boolean | false |
| position | Customize node position | start | end | - |
| title | Set the title | ReactNode | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| dotBg | Background color of node | string | |
| dotBorderWidth | Border width of node | string | number | 2 |
| dotSize | Node size | string | number | |
| itemPaddingBottom | Bottom padding of item | number | 20 |
| tailColor | Line color | string | rgba(5,5,5,0.06) |
| tailWidth | Line width | string | number | 2 |
