Timeline
A component that displays a series of events or steps in chronological order.
Basic Usage
Use the theme prop of TimelineItem to set the theme color of a time point, and the color prop to customize it. Use the lineVariant prop to set the style of the connector line.
Direction
Use the direction prop to set the arrangement direction of Timeline, supporting both vertical and horizontal orientations.
Content Placement
Use the contentPlacement prop to set the position of the content relative to the Timeline axis.
Size
Use the size prop to adjust the size of Timeline, available in both vertical and horizontal orientations.
Item Spacing
Use the spacing prop to set the spacing between time points in Timeline. A number is treated as pixels, while a string is used as a CSS length value.
TimelineItem also supports the spacing prop, which overrides the spacing of Timeline. It inherits that spacing when it is not set.
Connector Line
Use the lineVariant prop to set the style of the connector line. It accepts 'solid' (default) and 'dashed'. Both Timeline and TimelineItem support the prop, and the value set on TimelineItem overrides the one set on Timeline. The last time point draws no connector line.
Mark
Set the mark prop on TimelineItem to display marker text beside the time point. The mark slot can be used to customize the marker content.
Custom Node
Use the icon slot of TimelineItem to customize the content of the node at a time point.
Custom Content
TimelineItem provides the header, footer, and default slots for customizing the header, footer, and body content respectively.
API
TimelineProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| direction | 'horizontal' | 'vertical' | True | 'vertical' | The arrangement direction of Timeline. | 0.2.0 |
| contentPlacement | 'start' | 'end' | True | 'end' | The position of the Timeline content relative to the axis. | 0.2.0 |
| size | 'medium' | 'large' | True | 'medium' | The size of Timeline. | 0.2.0 |
| spacing | number | string | True | | The spacing between TimelineItem components in Timeline. | 0.2.1 |
| lineVariant | 'solid' | 'dashed' | True | 'solid' | The style of the connector line of Timeline, used as the default for every TimelineItem. | 0.2.1 |
| pollSizeChange | boolean | True | false | Whether to poll for size changes of Timeline. | 0.2.0 |
| smooth | boolean | True | false | Whether the Timeline nodes are drawn smoothly. | 0.2.0 |
| contentSpan | number | ValueWithDeviceWidth<number> | True | 70 | The proportion (0-100) of the content area within the combined mark and content width, supports responsive values. | 0.2.0 |
TimelineSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | The content of Timeline, used to place TimelineItem. | 0.2.0 |
TimelineItemProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| color | string | True | | Custom color of the TimelineItem node. | 0.2.0 |
| content | string | True | | The body content of TimelineItem. | 0.2.0 |
| footer | string | True | | The footer content of TimelineItem. | 0.2.0 |
| lineVariant | 'solid' | 'dashed' | True | 'solid' | The style of the TimelineItem connector line, which overrides the style set by Timeline. | 0.2.0 |
| mark | string | True | | The marker text of TimelineItem. | 0.2.0 |
| spacing | number | string | True | | The spacing of TimelineItem itself, which overrides the spacing set by Timeline. | 0.2.1 |
| title | string | True | | The title of TimelineItem. | 0.2.0 |
| theme | 'primary' | 'notice' | 'success' | 'info' | 'warning' | 'danger' | 'sakura' | True | 'primary' | The theme color of TimelineItem. | 0.2.0 |
TimelineItemSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | The body content of TimelineItem. | 0.2.0 |
| icon | | The icon at the node of TimelineItem. | 0.2.0 |
| mark | | The marker content of TimelineItem. | 0.2.0 |
| footer | | The footer content of TimelineItem. | 0.2.0 |
| header | | The header content of TimelineItem. | 0.2.0 |
ValueWithDeviceWidth
enum SCREEN_SIZE_TYPE {
XS = 'xs',
SM = 'sm',
MD = 'md',
LG = 'lg',
XL = 'xl',
XXL = 'xxl'
}
type ValueWithDeviceWidth<T> = Record<SCREEN_SIZE_TYPE, T>