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/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>
`;