2021-10-22 19:32:39 +08:00
---
2021-10-25 15:21:08 +08:00
title: Timeline
2021-10-22 19:32:39 +08:00
lang: en-US
---
2021-09-17 00:18:50 +08:00
# 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
:::
## 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
:::
2021-09-18 11:31:58 +08:00
## Vertically centered
Timeline-Item is centered vertically.
:::demo
timeline/center
:::
2021-09-17 00:18:50 +08:00
## Timeline Slots
2021-10-04 08:26:51 +08:00
| Name | Description | Subtags |
| ---- | --------------------------- | ------------- |
| — | Custom content for timeline | Timeline-Item |
2021-09-17 00:18:50 +08:00
## Timeline-Item Attributes
2021-09-18 11:31:58 +08:00
| Attribute | Description | Type | Accepted Values | Default |
| -------------- | --------------------------- | ------- | ------------------------------------------- | ------- |
| timestamp | timestamp content | string | — | — |
| hide-timestamp | whether to show timestamp | boolean | — | false |
| center | Whether vertically centered | boolean | — | false |
| placement | position of timestamp | string | top / bottom | bottom |
| type | node type | string | primary / success / warning / danger / info | — |
| color | background color of node | string | hsl / hsv / hex / rgb | — |
| size | node size | string | normal / large | normal |
| icon | icon class name | string | — | — |
| hollow | icon is hollow | boolean | — | false |
2021-09-17 00:18:50 +08:00
## Timeline-Item Slots
| Name | Description |
| ---- | -------------------------------- |
| — | Custom content for timeline item |
| dot | Custom defined node |
