mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
80 lines
2.5 KiB
Markdown
80 lines
2.5 KiB
Markdown
---
|
|
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 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]`'top' \| 'bottom'` | bottom |
|
|
| type | node type | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | '' |
|
|
| color | background color of node | ^[enum]`'hsl' \| 'hsv' \| 'hex' \| 'rgb'` | '' |
|
|
| 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 |
|