blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity
vant/docs/examples-docs/en-US/progress.md
neverland 14de879a3b [Doc] add some english documents (#220) 
* [bugfix] Checkbox border render error in weixin browser

* [bugfix] TreeSelect dependency path error

* [bugfix] Swipe should clear autoplay timer when destroyed
2017-10-18 07:14:25 -05:00

1.4 KiB
Raw Blame History

Progress

Install

import { Progress } from 'vant';

Vue.component(Progress.name, Progress);

Usage

Basic Usage

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

:::demo Basic Usage

<van-progress :percentage="0"></van-progress>
<van-progress :percentage="46"></van-progress>
<van-progress :percentage="100"></van-progress>

:::

进度条置灰

:::demo 进度条置灰

<van-progress inactive :percentage="0"></van-progress>
<van-progress inactive :percentage="46"></van-progress>
<van-progress inactive :percentage="100"></van-progress>

:::

样式定制

可以使用pivot-text属性自定义文字，color属性自定义进度条颜色

:::demo 样式定制

<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>

:::

API

Attribute Description Type Default Accepted Values
inactive 是否置灰 Boolean false
percentage 进度百分比 Number false 0-100
pivotText 文字显示 String 百分比文字 -
color 进度条颜色 String #38f hexvalue
textColor 进度条文字颜色 String #fff hexvalue