mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
75 lines
2.2 KiB
Markdown
75 lines
2.2 KiB
Markdown
---
|
|
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
|
|
|
|
| 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 |
|
|
|
|
## Timeline-Item Slots
|
|
|
|
| Name | Description |
|
|
| ---- | -------------------------------- |
|
|
| — | Custom content for timeline item |
|
|
| dot | Custom defined node |
|