blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 02:16:12 +08:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 87 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/demo-common.js
View File

@ -33,6 +33,7 @@ Locale.add({
red: '红色', red: '红色',
orange: '橙色', orange: '橙色',
yellow: '黄色', yellow: '黄色',
purple: '紫色',
tab: '标签', tab: '标签',
tag: '标签', tag: '标签',
desc: '描述信息', desc: '描述信息',
@ -60,6 +61,7 @@ Locale.add({
red: 'Red', red: 'Red',
orange: 'Orange', orange: 'Orange',
yellow: 'Yellow', yellow: 'Yellow',
purple: 'Purple',
tab: 'Tab', tab: 'Tab',
tag: 'Tag', tag: 'Tag',
desc: 'Description', desc: 'Description',

2
docs/src/index.js
View File

@ -16,7 +16,7 @@ const router = new VueRouter({
router.beforeEach((route, redirect, next) => { router.beforeEach((route, redirect, next) => {
if (isMobile) { if (isMobile) {
location.replace('/zanui/vant/examples' + location.hash); location.replace(location.pathname === '/' ? 'examples.html' : '/zanui/vant/examples' + location.hash);
} }
document.title = route.meta.title || document.title; document.title = route.meta.title || document.title;
next(); next();

25
packages/progress/demo/index.vue
View File

@ -1,21 +1,22 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-progress :percentage="0" /> <van-progress :percentage="50" />
<van-progress :percentage="46" />
<van-progress :percentage="100" />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('title2')">
<van-progress inactive :percentage="0" /> <van-progress inactive :percentage="50" />
<van-progress inactive :percentage="46" />
<van-progress inactive :percentage="100" />
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="$t('title3')">
<van-progress :pivot-text="$t('red')" color="#ed5050" :percentage="26" /> <van-progress :pivot-text="$t('orange')" color="#f2826a" :percentage="25" />
<van-progress :pivot-text="$t('orange')" color="#f60" :percentage="46" /> <van-progress :pivot-text="$t('red')" color="#f3594b" :percentage="50" />
<van-progress :pivot-text="$t('yellow')" color="#f09000" :percentage="66" /> <van-progress
:percentage="75"
:pivot-text="$t('purple')"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
</demo-block> </demo-block>
</demo-section> </demo-section>
</template> </template>
@ -24,7 +25,7 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
title2: '进度条置灰', title2: '置灰',
title3: '样式定制' title3: '样式定制'
}, },
'en-US': { 'en-US': {
@ -38,10 +39,10 @@ export default {
<style lang="postcss"> <style lang="postcss">
.demo-progress { .demo-progress {
.van-progress { .van-progress {
margin: 20px 10px; margin: 20px;
&:first-of-type { &:first-of-type {
margin-top: 10px; margin-top: 5px;
} }
} }
} }

32
packages/progress/en-US.md
View File

@ -13,18 +13,14 @@ Vue.use(Progress);
Use 'percentage' prop to set current progress Use 'percentage' prop to set current progress
```html ```html
<van-progress :percentage="0" /> <van-progress :percentage="50" />
<van-progress :percentage="46" />
<van-progress :percentage="100" />
``` ```
#### Inactive #### Inactive
```html ```html
<van-progress inactive :percentage="0" /> <van-progress inactive :percentage="50" />
<van-progress inactive :percentage="46" />
<van-progress inactive :percentage="100" />
``` ```
@ -32,9 +28,24 @@ Use 'percentage' prop to set current progress
Use `pivot-text` to custom text，use `color` to custom bar color Use `pivot-text` to custom text，use `color` to custom bar color
```html ```html
<van-progress pivot-text="Red" color="#ed5050" :percentage="26" /> <van-progress
<van-progress pivot-text="Orange" color="#f60" :percentage="46" /> pivot-text="Orange"
<van-progress pivot-text="Yellow" color="#f09000" :percentage="66" /> 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 ### API
@ -44,6 +55,7 @@ Use `pivot-text` to custom text，use `color` to custom bar color
| inactive | Whether to be gray | `Boolean` | `false` | | inactive | Whether to be gray | `Boolean` | `false` |
| percentage | Percentage | `Number` | `false` | | percentage | Percentage | `Number` | `false` |
| show-pivot | Whether to show text | `Boolean` | `true` | | show-pivot | Whether to show text | `Boolean` | `true` |
| pivot-text | Text | `String` | percentage |
| color | Color | `String` | `#38f` | | color | Color | `String` | `#38f` |
| pivot-text | Text | `String` | percentage |
| pivot-color | Text background color | `String` | inherit progress color |
| text-color | Text color | `String` | `#fff` | | text-color | Text color | `String` | `#fff` |

13
packages/progress/index.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div :class="b()"> <div :class="b()">
<span :class="b('portion')" :style="portionStyle" /> <span :class="b('portion')" :style="portionStyle">
<span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span> <span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
</span>
</div> </div>
</template> </template>
@ -13,6 +14,7 @@ export default create({
props: { props: {
inactive: Boolean, inactive: Boolean,
pivotColor: String,
percentage: { percentage: {
type: Number, type: Number,
required: true, required: true,
@ -42,19 +44,18 @@ export default create({
componentColor() { componentColor() {
return this.inactive ? '#cacaca' : this.color; return this.inactive ? '#cacaca' : this.color;
}, },
pivotStyle() { pivotStyle() {
const { percentage } = this;
return { return {
color: this.textColor, color: this.textColor,
backgroundColor: this.componentColor, background: this.pivotColor || this.componentColor
left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
}; };
}, },
portionStyle() { portionStyle() {
return { return {
width: this.percentage + '%', width: this.percentage + '%',
backgroundColor: this.componentColor background: this.componentColor
}; };
} }
} }

19
packages/progress/test/__snapshots__/demo.spec.js.snap
View File

@ -3,19 +3,20 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<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:50%;background:#38f;"><span class="van-progress__pivot" style="color:#fff;background:#38f;">50%</span></span>
<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>
<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> </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:50%;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span>
<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>
<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> </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:25%;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span>
<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>
<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: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>
</div> </div>
`; `;

34
packages/progress/zh-CN.md
View File

@ -14,18 +14,14 @@ Vue.use(Progress);
进度条默认为蓝色，使用`percentage`属性来设置当前进度 进度条默认为蓝色，使用`percentage`属性来设置当前进度
```html ```html
<van-progress :percentage="0" /> <van-progress :percentage="50" />
<van-progress :percentage="46" />
<van-progress :percentage="100" />
``` ```
#### 进度条置灰 #### 置灰
```html ```html
<van-progress inactive :percentage="0" /> <van-progress inactive :percentage="50" />
<van-progress inactive :percentage="46" />
<van-progress inactive :percentage="100" />
``` ```
@ -34,9 +30,24 @@ Vue.use(Progress);
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
```html ```html
<van-progress pivot-text="红色" color="#ed5050" :percentage="26" /> <van-progress
<van-progress pivot-text="橙色" color="#f60" :percentage="46" /> pivot-text="橙色"
<van-progress pivot-text="黄色" color="#f09000" :percentage="66" /> 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 ### API
@ -46,6 +57,7 @@ Vue.use(Progress);
| inactive | 是否置灰 | `Boolean` | `false` | | inactive | 是否置灰 | `Boolean` | `false` |
| percentage | 进度百分比 | `Number` | `false` | | percentage | 进度百分比 | `Number` | `false` |
| show-pivot | 是否显示进度文字 | `Boolean` | `true` | | show-pivot | 是否显示进度文字 | `Boolean` | `true` |
| pivot-text | 文字显示 | `String` | 百分比文字 |
| color | 进度条颜色 | `String` | `#38f` | | color | 进度条颜色 | `String` | `#38f` |
| text-color | 进度条文字颜色 | `String` | `#fff` | | text-color | 进度条文字颜色 | `String` | `#fff` |
| pivot-text | 文字显示 | `String` | 百分比文字 |
| pivot-color | 文字背景色 | `String` | 与进度条颜色一致 |

14
packages/vant-css/src/progress.css
View File

@ -10,20 +10,22 @@
left: 0; left: 0;
height: 100%; height: 100%;
position: absolute; position: absolute;
border-radius: 4px; border-radius: inherit;
} }
&__pivot { &__pivot {
top: 50%; top: 50%;
min-width: 28px; right: 0;
min-width: 2em;
padding: 0 5px; padding: 0 5px;
font-size: 8px; font-size: 10px;
margin-top: -6px;
position: absolute; position: absolute;
border-radius: 6px; line-height: 1.6;
line-height: 12px;
text-align: center; text-align: center;
border-radius: 1em;
word-break: keep-all;
box-sizing: border-box; box-sizing: border-box;
background-color: $gray-light; background-color: $gray-light;
transform: translate(50%, -50%);
} }
} }