3.5 KiB
title, lang
| title | lang |
|---|---|
| Timeline | en-US |
Timeline
Visually display timeline.
Basic usage
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
:::
Mode ^(2.13.1)
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
:::
Custom node
Size, color, and icons can be customized in node.
:::demo
timeline/custom-node
:::
Custom timestamp
Timestamp can be placed on top of content when content is too high.
:::demo
timeline/custom-timestamp
:::
Vertically centered
Timeline-Item is centered vertically.
:::demo
timeline/center
:::
Reverse ^(2.11.9)
Use the reverse property to control the order of the nodes.
:::demo
timeline/reverse
:::
Timeline API
Timeline Attributes
| 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 |
Timeline Slots
| Name | Description | Subtags |
|---|---|---|
| default | customize default content for timeline | Timeline-Item |
Timeline-Item API
Timeline-Item Attributes
| 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 |
Timeline-Item Slots
| Name | Description |
|---|---|
| default | customize default content for timeline item |
| dot | customize defined node for timeline item |