Progress 进度条

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

基础用法

进度条默认为蓝色,使用 属性来设置当前进度。

  1. <van-progress :percentage="50" />

置灰

设置 inactive 属性后进度条将置灰。

  1. <van-progress inactive :percentage="50" />

样式定制

可以使用 属性自定义文字,color 属性自定义进度条颜色。

类型定义

    ProgressInstance 是组件实例的类型,用法如下:

    样式变量

    组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 。

    名称默认值描述
    —van-progress-height4px-
    —van-progress-colorvar(—van-primary-color)-
    —van-progress-inactive-colorvar(—van-gray-5)-
    —van-progress-background-colorvar(—van-gray-3)-
    —van-progress-pivot-padding0 5px-
    —van-progress-pivot-text-colorvar(—van-white)-
    —van-progress-pivot-font-sizevar(—van-font-size-xs)-
    —van-progress-pivot-line-height1.6-
    —van-progress-pivot-background-colorvar(—van-primary-color)-