Progress 进度条
介绍
用于展示操作的当前进度。
代码演示
样式定制
可以使用 pivot-text
属性自定义文字,color
属性自定义进度条颜色。
<z-progress pivot-text="橙色" color="#f2826a" :percentage="25" />
<z-progress pivot-text="红色" color="#ee0a24" :percentage="50" />
<z-progress
:percentage="75"
pivot-text="紫色"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
percentage | 进度百分比 | number | string | 0 |
stroke-width | 进度条粗细,默认单位为px | number | string | 8rpx |
color | 进度条颜色 | string | #1989fa |
track-color | 轨道颜色 | string | #e5e5e5 |
pivot-text | 进度文字内容 | string | 百分比 |
pivot-color | 进度文字背景色 | string | 同进度条颜色 |
text-color | 进度文字颜色 | string | white |
inactive | 是否置灰 | boolean | false |
show-pivot | 是否显示进度文字 | boolean | true |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--z-progress-height | 8rpx | - |
--z-progress-color | var(--z-primary-color) | - |
--z-progress-inactive-color | var(--z-gray-5) | - |
--z-progress-background | var(--z-gray-3) | - |
--z-progress-pivot-padding | 0 10rpx | - |
--z-progress-pivot-text-color | var(--z-white) | - |
--z-progress-pivot-font-size | var(--z-font-size-xs) | - |
--z-progress-pivot-line-height | 1.6 | - |
--z-progress-pivot-background | var(--z-primary-color) | - |