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/progress.md
cookfront 2b71650c09 fix docs
2017-03-21 20:50:34 +08:00

2.1 KiB
Raw Blame History

Progress

基础用法

:::demo 基础用法

<div class="demo-progress__wrapper">
  <zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
</div>
<div class="demo-progress__wrapper">
  <zan-progress class="demo-progress__demo2" :percentage="46"></zan-progress>
</div>
<div class="demo-progress__wrapper">
  <zan-progress class="demo-progress__demo1" :percentage="100"></zan-progress>
</div>

:::

Inactive

:::demo Inactive

<div class="demo-progress__wrapper">
  <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></zan-progress>
</div>
<div class="demo-progress__wrapper">
  <zan-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></zan-progress>
</div>
<div class="demo-progress__wrapper">
  <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>

:::

自定义颜色和文字

:::demo 自定义颜色

</div>
<div class="demo-progress__wrapper">
  <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
</div>
<div class="demo-progress__wrapper">
  <zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
</div>
<div class="demo-progress__wrapper">
  <zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
</div>

:::

API

参数 说明 类型 默认值 可选值
inactive 是否只会 boolean false true, false
percentage 进度百分比 number false 0-100
pivotText 文字显示 string 百分比文字 -
color 进度条颜色 string #38f hexvalue
textColor 进度条文字颜色 string #fff hexvalue