mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
8b7d8eacf5
* feat(components): [timeline] support item-placement prop * feat: update * feat: update * feat: update * feat: update * feat: update * test: update * feat: update * feat: update * feat: update * docs: update version number * feat: update * feat: revert padding * feat: update * chore: format * docs: update version number * chore: use ExtractPublicPropTypes * Update docs/en-US/component/timeline.md Co-authored-by: rzzf <cszhjh@gmail.com> * style: use content-box * docs: add an example * style: add padding-right: 0 * docs: remove max-width: 600px * feat: add alternate-left and alternate-right * feat: modify the value of mode --------- Co-authored-by: rzzf <cszhjh@gmail.com>
3.3 KiB
3.3 KiB
title, lang
| title | lang |
|---|---|
| Timeline | 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
:::
Mode ^(2.13.1)
Use mode to control the relative position of timeline and content.
:::demo
timeline/mode
:::
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
:::
Reverse ^(2.11.9)
Use the reverse property to control the order of the nodes.
:::demo
timeline/reverse
:::
Timeline API
Timeline Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| reverse ^(2.11.9) | whether reverse order | ^[boolean] | false |
| mode ^(2.13.1) | relative position of timeline and content | ^[enum]'start' | 'alternate' | 'alternate-reverse' | 'end' |
start |
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 |