Progress 进度条
YhProgress 用于展示任务进度，支持线形、环形、仪表盘、多环嵌套、缓冲进度、条纹动画、未确定状态以及插槽自定义内容。
基础用法
默认线形模式支持语义化状态样式和内置状态图标。
50%
基础用法
条内显示百分比
使用 text-inside 可以将进度文本放到线形进度条内部。
条内显示百分比
自定义内容
默认插槽可以替换内置标签区域。所有模式下插槽都可以拿到当前 percentage。
自定义内容
80%
进行中
自定义内容
环形与仪表盘
通过 type="circle" 或 type="dashboard" 切换径向进度样式。
25%
环形与仪表盘
80%
50%
渐变与动画
多环嵌套
当 percentage 传入数组时，组件会按顺序渲染多层同心圆进度。
多维数据
多环嵌套
多环嵌套
条纹与流动
striped 用于开启条纹样式，striped-flow 会按照 duration 让条纹流动起来。
60%
80%
条纹与流动
高级特性
缓冲进度
使用 secondary-percentage 可以在主进度后面显示缓冲轨道。
20%
缓冲进度
分段进度
使用 steps 可以将线形进度条划分为固定段数。
60%
分段进度
未确定状态
当暂时无法给出精确进度时，可以开启 indeterminate。
未确定状态
在 Nuxt 中使用
安装 @yh-ui/nuxt 后，可以在 Nuxt 3/4 页面和组件中直接使用 YhProgress。
50%
在 Nuxt 中使用
API
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 进度条模式 | 'line' | 'circle' | 'dashboard' | 'line' |
percentage | 当前进度值，多环模式下可传数组 | number | number[] | 0 |
secondary-percentage | 次级缓冲进度 | number | 0 |
status | 语义化状态样式 | 'success' | 'exception' | 'warning' | 'info' | undefined |
stroke-width | 进度条厚度 | number | 6 |
text-inside | 是否将文字显示在线形进度条内部 | boolean | false |
width | 环形和仪表盘模式宽度 | number | 126 |
show-text | 是否显示文字或状态图标 | boolean | true |
color | 自定义颜色、颜色函数、数组或渐变映射 | string | ((percentage: number) => string) | string[] | Record<string, string> | '' |
icon | 自定义图标类名 | string | '' |
animated | 是否旋转环形激活路径 | boolean | false |
define-background-color | 自定义轨道背景色 | string | '' |
format | 默认文本格式化函数 | (percentage: number) => string | undefined |
stroke-linecap | 线帽样式 | 'butt' | 'round' | 'square' | 'round' |
striped | 是否开启线形条纹样式 | boolean | false |
striped-flow | 是否开启线形条纹流动动画 | boolean | false |
indeterminate | 是否开启未确定线形动画 | boolean | false |
duration | 动画时长，单位秒 | number | 3 |
steps | 线形模式下的分段数量 | number | 0 |
theme-overrides | 组件主题覆盖变量 | ComponentThemeVars | undefined |
Events
当前组件未暴露组件事件。
Slots
| 插槽 | 说明 | 参数 |
|---|---|---|
default | 替换内置标签区域 | { percentage: number } |
Expose
当前组件未暴露公开实例方法或属性。
类型导出
| 类型 | 说明 |
|---|---|
YhProgressProps | 组件 Props 类型 |
YhProgressSlots | 组件 Slots 类型 |
YhProgressType | 进度条模式联合类型 |
YhProgressStatus | 进度条状态联合类型 |
YhProgressInstance | 组件实例类型 |
主题变量
YhProgress 支持 themeOverrides。当前组件样式中实际消费的专属 CSS 变量只有下面这一项，其余颜色与背景主要来自全局主题令牌。
| 变量 | 说明 | 默认值 |
|---|---|---|
--yh-progress-duration | 条纹动画、未确定动画和环形旋转动画使用的时长 | 3s |