docs/en-US/component/timeline.md
Visually display timeline.
Timeline can be split into multiple activities. Timestamps are important features that distinguish them from other components. Note the difference with Steps.
:::demo
timeline/basic
:::
Use mode to control the relative position of timeline and content.
:::tip
After ^(2.13.1), el-timeline explicitly sets padding styles. If you have overridden padding styles of ul tag in your project, please check to ensure the layout is correct.
:::
:::demo
timeline/mode
:::
Size, color, and icons can be customized in node.
:::demo
timeline/custom-node
:::
Timestamp can be placed on top of content when content is too high.
:::demo
timeline/custom-timestamp
:::
Timeline-Item is centered vertically.
:::demo
timeline/center
:::
Use the reverse property to control the order of the nodes.
:::demo
timeline/reverse
:::
| Name | Description | Type | Default |
|---|---|---|---|
| reverse ^(2.11.9) | whether reverse order | ^[boolean] | false |
| mode ^(2.13.1) | relative position of timeline and content | ^[enum]'start' | 'alternate' | 'alternate-reverse' | 'end' | start |
| Name | Description | Subtags |
|---|---|---|
| default | customize default content for timeline | Timeline-Item |
| Name | Description | Type | Default |
|---|---|---|---|
| timestamp | timestamp content | ^[string] | '' |
| hide-timestamp | whether to show timestamp | ^[boolean] | false |
| center | whether vertically centered | ^[boolean] | false |
| placement | position of timestamp | ^[enum]'top' | 'bottom' | bottom |
| type | node type | ^[enum]'primary' | 'success' | 'warning' | 'danger' | 'info' | '' |
| color | background color of node | ^[string] | '' |
| size | node size | ^[enum]'normal' | 'large' | normal |
| icon | icon component | ^[string] / ^[Component] | — |
| hollow | icon is hollow | ^[boolean] | false |
| Name | Description |
|---|---|
| default | customize default content for timeline item |
| dot | customize defined node for timeline item |