mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
2.5 KiB
2.5 KiB
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
:::
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 component | Component | (() => VNode) |
— | — |
hollow | icon is hollow | boolean | — | false |
Timeline-Item Slots
Name | Description |
---|---|
— | Custom content for timeline item |
dot | Custom defined node |