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.
Custom node
Size, color, and icons can be customized in node.
Custom timestamp
Timestamp can be placed on top of content when content is too high.
Vertically centered
Timeline-Item is centered vertically.
Timeline API
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 | bottom |
| type | node type | enum | '' |
| color | background color of node | enum | '' |
| size | node size | enum | 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 |