Progress 进度条
引入
通过以下方式来全局注册组件,更多注册方式请参考。
基础用法
进度条默认为蓝色,使用 属性来设置当前进度。
<van-progress :percentage="50" />
置灰
设置 inactive
属性后进度条将置灰。
<van-progress inactive :percentage="50" />
样式定制
可以使用 属性自定义文字,color
属性自定义进度条颜色。
类型定义
ProgressInstance
是组件实例的类型,用法如下:
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 。
名称 | 默认值 | 描述 |
---|---|---|
—van-progress-height | 4px | - |
—van-progress-color | var(—van-primary-color) | - |
—van-progress-inactive-color | var(—van-gray-5) | - |
—van-progress-background-color | var(—van-gray-3) | - |
—van-progress-pivot-padding | 0 5px | - |
—van-progress-pivot-text-color | var(—van-white) | - |
—van-progress-pivot-font-size | var(—van-font-size-xs) | - |
—van-progress-pivot-line-height | 1.6 | - |
—van-progress-pivot-background-color | var(—van-primary-color) | - |