Pixelium Designv0.2.1-delta

中文

English

中文

English

Appearance

时间线 Timeline ​

按时间顺序展示一系列事件或步骤的组件。

基础使用 ​

通过 TimelineItem 的 theme 属性设置时间点的主题色，使用 color 属性可以自定义颜色。使用 lineVariant 属性可以设置连接线的样式。

2026-01
Primary theme
Use the `theme` prop to set the theme color.
v1.0.0
2026-03
Success theme
Different theme colors are available.
v1.1.0
2026-06
Warning theme
Or use the `color` prop to set a custom color.
v2.0.0
2026-09
Custom color
A custom color overrides the theme color.
v2.1.0
2026-11
Dashed line
The `line-variant` prop controls the connector line style.
v2.2.0
2026-12
Solid line
The last item does not draw a connector line.
v2.3.0
隐藏源代码

排列方向 ​

通过 direction 属性设置 Timeline 的排列方向，支持垂直和水平两种方向。

2026-01
Vertical
Arranged vertically by default.
2026-03
Vertical
Set the `direction` prop to `'horizontal'` to switch.
2026-01
Horizontal
Time points extend along the horizontal axis.
...
2026-03
Horizontal
Good for horizontal steps or flows.
2026-06
Horizontal
Content sits below the axis.
隐藏源代码

内容位置 ​

通过 contentPlacement 属性设置内容相对于 Timeline 的位置。

2026-01
Content on the right
Rendered when `contentPlacement` is `'end'`.
2026-03
Content on the right
In vertical mode, content sits to the right of the dot.
2026-01
Content on the left
Rendered when `contentPlacement` is `'start'`.
2026-03
Content on the left
In vertical mode, content sits to the left of the dot.
隐藏源代码

尺寸 ​

通过 size 属性调整 Timeline 的尺寸，在垂直或水平方向上都可以使用。

2026-01
Medium size
The `size` prop is `'medium'`, good for regular content.
2026-03
Medium size
Dot, font, and spacing all use the default sizes.
2026-06
Large size
The `size` prop is `'large'`, good for emphasized timelines.
2026-09
Large size
Dot, font, and spacing all increase accordingly.
隐藏源代码

标记 ​

为 TimelineItem 设置 mark 属性可以在时间点一侧展示标记文本，也可以使用 mark 插槽自定义标记内容。

2026-01
Released
The `mark` prop shows marker text beside the time point.
v1.0.0
⭐ 2026-03
Released
Markers are displayed on every item once any item has one.
v1.1.0
2026-06
Released
The `mark` slot can customize the marker content.
v2.0.0
隐藏源代码

自定义节点 ​

通过 TimelineItem 的 icon 插槽可以自定义时间点处的节点内容。

2026-01
With icon
The `icon` slot replaces the default dot with an icon.
v1.0.0
2026-03
With icon
Any icon from the icon library can be placed inside the slot.
v1.1.0
2026-06
With icon
The icon inherits the theme color of the item.
v2.0.0
隐藏源代码

自定义内容 ​

TimelineItem 提供了 header、footer 和 default 插槽，分别用于自定义头部、底部和主体内容。

2026-01
First release
Initial version published 🎉
Published on 2026-01-15
2026-03
Feature update
Added custom dot, mark and slot support.
2026-06
Major release
Rewrote the rendering engine with better performance.
Breaking changes
隐藏源代码

API ​

TimelineProps ​

属性类型可选默认值描述版本
direction'horizontal' | 'vertical'是'vertical'Timeline 的排列方向。0.2.0
contentPlacement'start' | 'end'是'end'Timeline 内容相对轴线的位置。0.2.0
size'medium' | 'large'是'medium'Timeline 的尺寸。0.2.0
pollSizeChangeboolean是false是否轮询检测 Timeline 的尺寸变化。0.2.0
smoothboolean是falseTimeline 节点是否使用平滑绘制。0.2.0
contentSpannumber | ValueWithDeviceWidth<number>是70content 区域在 mark 与 content 总宽度中的占比（0-100），支持响应式。0.2.0

TimelineSlots ​

插槽参数描述版本
defaultTimeline 内容，用于放置 TimelineItem。0.2.0

TimelineItemProps ​

属性类型可选默认值描述版本
colorstring是TimelineItem 节点的自定义颜色。0.2.0
contentstring是TimelineItem 的主体内容。0.2.0
footerstring是TimelineItem 的底部内容。0.2.0
lineVariant'solid' | 'dashed'是'solid'TimelineItem 连接线的样式。0.2.0
markstring是TimelineItem 的标记文本。0.2.0
titlestring是TimelineItem 的标题。0.2.0
theme'primary' | 'notice' | 'success' | 'info' | 'warning' | 'danger' | 'sakura'是'primary'TimelineItem 的主题色。0.2.0

TimelineItemSlots ​

插槽参数描述版本
defaultTimelineItem 的主体内容。0.2.0
iconTimelineItem 节点处的图标。0.2.0
markTimelineItem 的标记内容。0.2.0
footerTimelineItem 的底部内容。0.2.0
headerTimelineItem 的头部内容。0.2.0

ValueWithDeviceWidth ​

ts
enum SCREEN_SIZE_TYPE {
	XS = 'xs',
	SM = 'sm',
	MD = 'md',
	LG = 'lg',
	XL = 'xl',
	XXL = 'xxl'
}

type ValueWithDeviceWidth<T> = Record<SCREEN_SIZE_TYPE, T>