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/markdown/zh-CN/progress.md
neverland d8b6ad7d54
[new feature] add i18n support (#310) 
* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [new feature] add i18n support

* feat: Extract demos from markdown

* feat: Base components demos

* [new feature] complete demo extract & translate

* [fix] text cases

* fix: add deepAssign test cases

* fix: changelog detail

* [new feature] AddressEdit support i18n
2017-11-15 20:08:51 -06:00

1.3 KiB
Raw Blame History

Progress 进度条

使用指南

import { Progress } from 'vant';

Vue.component(Progress.name, Progress);

代码演示

基础用法

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

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

进度条置灰

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

样式定制

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

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

API

参数 说明 类型 默认值 可选值
inactive 是否置灰 Boolean false -
percentage 进度百分比 Number false 0-100
showPivot 是否显示进度文字 Boolean true -
pivotText 文字显示 String 百分比文字 -
color 进度条颜色 String #38f hexvalue
textColor 进度条文字颜色 String #fff hexvalue