进度条 Progress

一个用于展示任务完成进度的组件，虽然并不意味着实际上的进度。

主题颜色

进度条有 'primary'（默认）、'success'、'warning'、'danger'、'sakura' 和 'notice' 多种主题。

隐藏源代码

样式变体

支持两种样式：'solid'（默认）和 'checkered'（棋盘格）。

隐藏源代码

指示内容

通过 indicator 插槽可以自定义指示内容（例如显示百分比文本）。组件会自动定位，indicatorPlacement 属性用于控制指示内容位于条内（'inside'）或外侧（'outside'）。

30%

70%

隐藏源代码

进度条尺寸

通过 size 属性控制高度，可选 'small'、'medium'（默认）、'large' 或直接传入数字（像素）。

隐藏源代码

前 / 后 插槽

使用 prepend 与 append 插槽可以在进度条前后添加内容（如标签或图标）。

Progress: 100%

Status: Complete

Message

隐藏源代码

自定义颜色

通过 color 传入自定义颜色（支持 rgb/rgba 字符串或 3/4/6/8 位十六进制），组件会基于该颜色生成色板。可使用 trackBackgroundColor 覆盖轨道背景色。

隐藏源代码

API

ProgressProps

属性	类型	可选	默认值	描述	版本
percentage	number	是	0	数值，表示完成进度（0-100）。	0.1.0
variant	'solid' | 'checkered'	是	'solid'	进度条的样式变体。	0.1.0
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice'	是	'primary'	进度条的主题。	0.1.0
size	'medium' | 'large' | 'small'	是	'medium'	进度条的尺寸，输入数字时单位为 px。	0.1.0
gap	number	是	2	留白间隔（px），用于边框内间距。	0.1.0
indicatorPlacement	'inside' | 'outside'	是	'inside'	提示内容的位置，位于进度条填充部分的内侧还是外侧。	0.1.0
color	string	是		自定义主色，详见 支持的颜色解析。	0.1.0
color	string	是		自定义主色，详见 支持的颜色解析。	0.1.0
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.1.0

ProgressSlots

插槽	参数	描述	版本
append	percentage: number	在进度条后方的插槽。	0.1.0
prepend	percentage: number	在进度条前方的插槽。	0.1.0
indicator	percentage: number	进度条里面的提示内容插槽。	0.1.0