ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-12-24 02:02:09 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Progress: optimzie dom struct

Browse Source
This commit is contained in:
陈嘉涵
2017-08-24 15:07:00 +08:00
parent ac4b739814
commit 5b1e27073d
3 changed files with 55 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
docs/examples-docs/progress.md
View File

@@ -1,13 +1,11 @@
<style>
.demo-progress {
&__wrapper {
padding: 5px;
.van-progress {
margin: 20px 10px;
}
}
</style>
## Progress 进度条
### 使用指南
@@ -21,57 +19,37 @@ Vue.component(Progress.name, Progress);
#### 基础用法
默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
进度条默认为蓝色，使用`percentage`属性来设置当前进度
:::demo 基础用法
```html
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
</div>
<van-progress :percentage="0"></van-progress>
<van-progress :percentage="46"></van-progress>
<van-progress :percentage="100"></van-progress>
```
:::
#### Inactive
#### 进度条置灰
是否置灰进度条，一般用于进度条被取消时。
:::demo Inactive
:::demo 进度条置灰
```html
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
</div>
<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 自定义颜色和文字
:::demo 样式定制
```html
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
</div>
<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>
```
:::
@@ -79,9 +57,8 @@ Vue.component(Progress.name, Progress);
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` |
| percentage | 进度百分比 | `number` | `false` | `0-100` |
| pivotText | 文字显示 | `string` | 百分比文字 | - |
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
| inactive | 是否置灰 | `boolean` | `false` | |
| percentage | 进度百分比 | `number` | `false` | `0-100` |
| pivotText | 文字显示 | `string` | 百分比文字 | - |
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |