进度条 Progress
一个用于展示任务完成进度的组件，虽然并不意味着实际上的进度。
主题颜色
进度条有 'primary'（默认）、'success'、'warning'、'danger'、'sakura' 和 'notice' 多种主题。
隐藏源代码
样式变体
支持两种样式：'solid'（默认）和 'checkered'（棋盘格）。
隐藏源代码
指示内容
通过 indicator 插槽可以自定义指示内容（例如显示百分比文本）。组件会自动定位，indicatorPlacement 属性用于控制指示内容位于条内（'inside'）或外侧（'outside'）。
30%
70%
隐藏源代码
进度条尺寸
通过 size 属性控制高度，可选 'small'、'medium'（默认）、'large' 或直接传入数字（px）。
隐藏源代码
前 / 后 插槽
使用 prepend 与 append 插槽可以在进度条前后添加内容（如标签或图标）。
Progress: 100%
Status: Complete
Message
隐藏源代码
自定义颜色
通过 color 传入自定义颜色（支持 rgb/rgba 字符串或 3/4/6/8 位十六进制），组件会基于该颜色生成色板。可使用 trackBackgroundColor 覆盖轨道背景色。
隐藏源代码
边框
通过 borderWidth（px）设置 Progress 外框的粗细，borderColor 设置外框的颜色。未设置 borderColor 时外框使用主题的中性色，borderWidth 默认为全局像素尺寸，设为 0 即可移除外框。
隐藏源代码
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 |
| trackColor | string | 是 | | 进度条轨道背景色。 | 0.1.0 |
| borderWidth | number | 是 | | Progress 外框的宽度。 | 0.2.1 |
| borderColor | string | 是 | | Progress 外框的颜色。 | 0.2.1 |
| 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 |