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

[breaking change] Loading: remove circle、gradient-circle type

Browse Source
This commit is contained in:
陈嘉涵 2019-04-29 17:08:21 +08:00
parent d3c8eb86e2
commit 5cd05e2447
6 changed files with 10 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/markdown/v2-progress-tracking.md
View File

@ -45,8 +45,10 @@
### Loading
- [ ] 移除 circle 类型
- [ ] 移除 gradient-circle 类型
- [x] 移除 circle 类型
- [x] 移除 gradient-circle 类型
改动原因：视觉规范变更
### Area

2
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -38,7 +38,7 @@ exports[`create a AddressEdit 1`] = `
<div class="van-picker__confirm">确认</div>
</div>
<div class="van-picker__loading">
<div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--circular" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">

2
packages/button/test/__snapshots__/index.spec.js.snap
View File

@ -2,6 +2,6 @@
exports[`loading size 1`] = `
<button class="van-button van-button--default van-button--normal van-button--loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button>
`;

28
packages/loading/index.less
View File

@ -9,11 +9,6 @@
position: relative;
vertical-align: middle;
&--circle {
width: 16px;
height: 16px;
}
&__spinner {
z-index: -1;
width: 100%;
@ -23,18 +18,6 @@
box-sizing: border-box;
animation: van-rotate 0.8s linear infinite;
&--circle {
border-radius: 100%;
border: 3px solid transparent;
border-color: @gray;
border-top-color: @gray-darker;
}
&--gradient-circle {
background-size: contain;
background-image: url('https://img.yzcdn.cn/vant/gradient-circle-black.png');
}
&--spinner {
animation-timing-function: steps(12);
@ -73,17 +56,6 @@
animation: van-circular 1.5s ease-in-out infinite;
}
}
&--white {
.van-loading__spinner--circle {
border-color: rgba(0, 0, 0, .1);
border-top-color: rgba(255, 255, 255, .7);
}
.van-loading__spinner--gradient-circle {
background-image: url('https://img.yzcdn.cn/vant/gradient-circle-white.png');
}
}
}
@keyframes van-circular {

6
packages/loading/index.tsx
View File

@ -22,10 +22,8 @@ function Loading(
) {
const { color, size, type } = props;
const colorType = color === 'white' || color === 'black' ? color : '';
const style = {
color: color === 'black' ? DEFAULT_COLOR : color,
color,
width: size,
height: size
};
@ -44,7 +42,7 @@ function Loading(
);
return (
<div class={bem([type, colorType])} style={style} {...inherit(ctx, true)}>
<div class={bem([type])} style={style} {...inherit(ctx, true)}>
<span class={bem('spinner', type)}>
{Spin}
{Circular}

4
packages/pull-refresh/test/__snapshots__/index.spec.js.snap
View File

@ -25,7 +25,7 @@ exports[`change head content when pulling down 3`] = `
<div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head">
<div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
<div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
</div>
</div>
</div>
@ -37,7 +37,7 @@ exports[`change head content when pulling down 4`] = `
<div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head">
<div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
<div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
</div>
</div>
</div>