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

feat(Progress): add some less vars (#4790)

Browse Source
This commit is contained in:
neverland 2019-10-20 13:15:25 +08:00 committed by GitHub
parent 95598e8842
commit 02c027b81c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/progress/index.js
View File

@ -1,12 +1,13 @@
import { createNamespace, isDef, addUnit } from '../utils'; import { createNamespace, isDef, addUnit } from '../utils';
import { BLUE, WHITE } from '../utils/constant';
const [createComponent, bem] = createNamespace('progress'); const [createComponent, bem] = createNamespace('progress');
export default createComponent({ export default createComponent({
props: { props: {
color: String,
inactive: Boolean, inactive: Boolean,
pivotText: String, pivotText: String,
textColor: String,
pivotColor: String, pivotColor: String,
trackColor: String, trackColor: String,
strokeWidth: [String, Number], strokeWidth: [String, Number],
@ -18,14 +19,6 @@ export default createComponent({
showPivot: { showPivot: {
type: Boolean, type: Boolean,
default: true default: true
},
color: {
type: String,
default: BLUE
},
textColor: {
type: String,
default: WHITE
} }
}, },

2
src/progress/index.less
View File

@ -10,6 +10,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
height: 100%; height: 100%;
background: @progress-color;
border-radius: inherit; border-radius: inherit;
} }
@ -19,6 +20,7 @@
box-sizing: border-box; box-sizing: border-box;
min-width: 3.6em; min-width: 3.6em;
padding: @progress-pivot-padding; padding: @progress-pivot-padding;
color: @progress-pivot-text-color;
font-size: @progress-pivot-font-size; font-size: @progress-pivot-font-size;
line-height: @progress-pivot-line-height; line-height: @progress-pivot-line-height;
text-align: center; text-align: center;

12
src/progress/test/__snapshots__/demo.spec.js.snap
View File

@ -3,18 +3,18 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(25, 137, 250);">50%</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">50%</span></span></div>
</div> </div>
<div> <div>
<div class="van-progress" style="height: 8px;"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(25, 137, 250);">50%</span></span></div> <div class="van-progress" style="height: 8px;"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">50%</span></span></div>
</div> </div>
<div> <div>
<div class="van-progress"><span class="van-progress__portion" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(202, 202, 202);">50%</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(202, 202, 202);">50%</span></span></div>
</div> </div>
<div> <div>
<div class="van-progress"><span class="van-progress__portion" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(242, 130, 106);">橙色</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(242, 130, 106);">橙色</span></span></div>
<div class="van-progress"><span class="van-progress__portion" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(238, 10, 36);">红色</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(238, 10, 36);">红色</span></span></div>
<div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(114, 50, 221);">紫色</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(114, 50, 221);">紫色</span></span></div>
</div> </div>
</div> </div>
`; `;

4
src/progress/test/__snapshots__/index.spec.js.snap
View File

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"></span></div>`; exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px;"></span></div>`;
exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(25, 137, 250);">test</span></span></div>`; exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">test</span></span></div>`;

4
src/style/var.less
View File

@ -475,11 +475,13 @@
// Progress // Progress
@progress-height: 4px; @progress-height: 4px;
@progress-color: @blue;
@progress-background-color: @gray-light; @progress-background-color: @gray-light;
@progress-pivot-padding: 0 5px; @progress-pivot-padding: 0 5px;
@progress-pivot-text-color: @white;
@progress-pivot-font-size: @font-size-xs; @progress-pivot-font-size: @font-size-xs;
@progress-pivot-line-height: 1.6; @progress-pivot-line-height: 1.6;
@progress-pivot-background-color: @gray-light; @progress-pivot-background-color: @blue;
// PullRefresh // PullRefresh
@pull-refresh-head-height: 50px; @pull-refresh-head-height: 50px;