timeline.md 2.4 KB
title: Timeline
lang: 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
:::
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
:::
Timeline Slots
| Name | Description | Subtags |
|---|---|---|
| — | Custom content for timeline | Timeline-Item |
Timeline-Item Attributes
| Name | 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 component | string \| Component |
— | — |
| hollow | icon is hollow | boolean | — | false |
Timeline-Item Slots
| Name | Description |
|---|---|
| — | Custom content for timeline item |
| dot | Custom defined node |