alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[Improvement] Progress: support gradient color (#1098)

Browse Source
This commit is contained in:
neverland
2018-05-18 14:28:33 +08:00
committed by GitHub
parent e9508262b7
commit eee44f0d7c
8 changed files with 87 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/progress/demo/index.vue
+13 -12
View File
@@ -1,21 +1,22 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-progress :percentage="0" />
<van-progress :percentage="46" />
<van-progress :percentage="100" />
<van-progress :percentage="50" />
</demo-block>
<demo-block :title="$t('title2')">
<van-progress inactive :percentage="0" />
<van-progress inactive :percentage="46" />
<van-progress inactive :percentage="100" />
<van-progress inactive :percentage="50" />
</demo-block>
<demo-block :title="$t('title3')">
<van-progress :pivot-text="$t('red')" color="#ed5050" :percentage="26" />
<van-progress :pivot-text="$t('orange')" color="#f60" :percentage="46" />
<van-progress :pivot-text="$t('yellow')" color="#f09000" :percentage="66" />
<van-progress :pivot-text="$t('orange')" color="#f2826a" :percentage="25" />
<van-progress :pivot-text="$t('red')" color="#f3594b" :percentage="50" />
<van-progress
:percentage="75"
:pivot-text="$t('purple')"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
</demo-block>
</demo-section>
</template>
@@ -24,7 +25,7 @@
export default {
i18n: {
'zh-CN': {
title2: '进度条置灰',
title2: '置灰',
title3: '样式定制'
},
'en-US': {
@@ -38,10 +39,10 @@ export default {
<style lang="postcss">
.demo-progress {
.van-progress {
margin: 20px 10px;
margin: 20px;
&:first-of-type {
margin-top: 10px;
margin-top: 5px;
}
}
}
packages/progress/en-US.md
+22 -10
View File
@@ -13,18 +13,14 @@ Vue.use(Progress);
Use 'percentage' prop to set current progress
```html
<van-progress :percentage="0" />
<van-progress :percentage="46" />
<van-progress :percentage="100" />
<van-progress :percentage="50" />
```
#### Inactive
```html
<van-progress inactive :percentage="0" />
<van-progress inactive :percentage="46" />
<van-progress inactive :percentage="100" />
<van-progress inactive :percentage="50" />
```
@@ -32,9 +28,24 @@ Use 'percentage' prop to set current progress
Use `pivot-text` to custom text，use `color` to custom bar color
```html
<van-progress pivot-text="Red" color="#ed5050" :percentage="26" />
<van-progress pivot-text="Orange" color="#f60" :percentage="46" />
<van-progress pivot-text="Yellow" color="#f09000" :percentage="66" />
<van-progress
pivot-text="Orange"
color="#f2826a"
:percentage="25"
/>
<van-progress
pivot-text="Red"
color="#f3594b"
:percentage="50"
/>
<van-progress
:percentage="75"
pivot-text="Purple"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
```
### API
@@ -44,6 +55,7 @@ Use `pivot-text` to custom text，use `color` to custom bar color
| inactive | Whether to be gray | `Boolean` | `false` |
| percentage | Percentage | `Number` | `false` |
| show-pivot | Whether to show text | `Boolean` | `true` |
| pivot-text | Text | `String` | percentage |
| color | Color | `String` | `#38f` |
| pivot-text | Text | `String` | percentage |
| pivot-color | Text background color | `String` | inherit progress color |
| text-color | Text color | `String` | `#fff` |
packages/progress/index.vue
+8 -7
View File
@@ -1,7 +1,8 @@
<template>
<div :class="b()">
<span :class="b('portion')" :style="portionStyle" />
<span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
<span :class="b('portion')" :style="portionStyle">
<span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
</span>
</div>
</template>
@@ -13,6 +14,7 @@ export default create({
props: {
inactive: Boolean,
pivotColor: String,
percentage: {
type: Number,
required: true,
@@ -42,19 +44,18 @@ export default create({
componentColor() {
return this.inactive ? '#cacaca' : this.color;
},
pivotStyle() {
const { percentage } = this;
return {
color: this.textColor,
backgroundColor: this.componentColor,
left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
background: this.pivotColor || this.componentColor
};
},
portionStyle() {
return {
width: this.percentage + '%',
backgroundColor: this.componentColor
background: this.componentColor
};
}
}
packages/progress/test/__snapshots__/demo.spec.js.snap
+10 -9
View File
@@ -3,19 +3,20 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-progress"><span class="van-progress__portion" style="width:0%;background-color:#38f;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#38f;left:0%;margin-left:0;">0%</span></div>
<div class="van-progress"><span class="van-progress__portion" style="width:46%;background-color:#38f;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#38f;left:46%;margin-left:-14px;">46%</span></div>
<div class="van-progress"><span class="van-progress__portion" style="width:100%;background-color:#38f;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#38f;left:100%;margin-left:-28px;">100%</span></div>
<div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#38f;"><span class="van-progress__pivot" style="color:#fff;background:#38f;">50%</span></span>
</div>
</div>
<div>
<div class="van-progress"><span class="van-progress__portion" style="width:0%;background-color:#cacaca;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#cacaca;left:0%;margin-left:0;">0%</span></div>
<div class="van-progress"><span class="van-progress__portion" style="width:46%;background-color:#cacaca;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#cacaca;left:46%;margin-left:-14px;">46%</span></div>
<div class="van-progress"><span class="van-progress__portion" style="width:100%;background-color:#cacaca;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#cacaca;left:100%;margin-left:-28px;">100%</span></div>
<div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span>
</div>
</div>
<div>
<div class="van-progress"><span class="van-progress__portion" style="width:26%;background-color:#ed5050;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#ed5050;left:26%;margin-left:-14px;">红色</span></div>
<div class="van-progress"><span class="van-progress__portion" style="width:46%;background-color:#f60;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#f60;left:46%;margin-left:-14px;">橙色</span></div>
<div class="van-progress"><span class="van-progress__portion" style="width:66%;background-color:#f09000;"></span> <span class="van-progress__pivot" style="color:#fff;background-color:#f09000;left:66%;margin-left:-14px;">黄色</span></div>
<div class="van-progress"><span class="van-progress__portion" style="width:25%;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span>
</div>
<div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#f3594b;"><span class="van-progress__pivot" style="color:#fff;background:#f3594b;">红色</span></span>
</div>
<div class="van-progress"><span class="van-progress__portion" style="width:75%;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span>
</div>
</div>
</div>
`;
packages/progress/zh-CN.md
+23 -11
View File
@@ -14,18 +14,14 @@ Vue.use(Progress);
进度条默认为蓝色，使用`percentage`属性来设置当前进度
```html
<van-progress :percentage="0" />
<van-progress :percentage="46" />
<van-progress :percentage="100" />
<van-progress :percentage="50" />
```
#### 进度条置灰
#### 置灰
```html
<van-progress inactive :percentage="0" />
<van-progress inactive :percentage="46" />
<van-progress inactive :percentage="100" />
<van-progress inactive :percentage="50" />
```
@@ -34,9 +30,24 @@ Vue.use(Progress);
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
```html
<van-progress pivot-text="红色" color="#ed5050" :percentage="26" />
<van-progress pivot-text="橙色" color="#f60" :percentage="46" />
<van-progress pivot-text="黄色" color="#f09000" :percentage="66" />
<van-progress
pivot-text="橙色"
color="#f2826a"
:percentage="25"
/>
<van-progress
pivot-text="红色"
color="#f3594b"
:percentage="50"
/>
<van-progress
:percentage="75"
pivot-text="紫色"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
```
### API
@@ -46,6 +57,7 @@ Vue.use(Progress);
| inactive | 是否置灰 | `Boolean` | `false` |
| percentage | 进度百分比 | `Number` | `false` |
| show-pivot | 是否显示进度文字 | `Boolean` | `true` |
| pivot-text | 文字显示 | `String` | 百分比文字 |
| color | 进度条颜色 | `String` | `#38f` |
| text-color | 进度条文字颜色 | `String` | `#fff` |
| pivot-text | 文字显示 | `String` | 百分比文字 |
| pivot-color | 文字背景色 | `String` | 与进度条颜色一致 |