Skip to content

Commit

Permalink
fix(loading): remove text
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeADre
BeADre committed Dec 1, 2020
1 parent b42046e commit 86ec547
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 126 deletions.
11 changes: 1 addition & 10 deletions packages/varlet-ui/src/loading/Loading.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
<template>
<div
class="varlet-loading"
:style="{ flexDirection: vertical ? 'column' : 'row' }"
>
<div class="varlet-loading">
<div
:class="`varlet-loading__wave varlet-loading__wave-${size}`"
v-if="type === 'wave'"
Expand Down Expand Up @@ -106,12 +103,6 @@
:class="`varlet-loading__disappear-item varlet-loading__disappear-item-${size}`"
></div>
</div>
<span
class="varlet-loading__text"
:style="{ fontSize: fontSize + 'px', color: fontColor }"
>
<slot></slot>
</span>
</div>
</template>

Expand Down
31 changes: 5 additions & 26 deletions packages/varlet-ui/src/loading/docs/en_US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,36 +30,15 @@ export default defineComponent({
<varlet-loading type="disappear" size="small" />
```

### Text

```html
<varlet-loading type="cube">loading</varlet-loading>
<varlet-loading type="wave">loading</varlet-loading>
<varlet-loading type="rect">loading</varlet-loading>
<varlet-loading type="disappear">loading</varlet-loading>
```

### Horizontal

```html
<varlet-loading type="cube" :vertical="false">loading</varlet-loading>
<varlet-loading type="wave" :vertical="false">loading</varlet-loading>
<varlet-loading type="rect" :vertical="false">loading</varlet-loading>
<varlet-loading type="disappear" :vertical="false">loading</varlet-loading>
```

## API

### Props

| Attribute | Description | Type | Default |
| --------- | ---------------------------------------------------- | --------- | --------- |
| color | Loading color | _string_ | `#00BCD4` |
| type | Can be set to `wave` `cube` `rect` `disappear` | _string_ | `wave` |
| size | Can be set to `large` `normal` `small` `mini` | _string_ | `normal` |
| fontColor | Text color | _string_ | `#ccc` |
| fontSize | Text font size | _number_ | `14` |
| vertical | Whether to arrange icons and text content vertically | _boolean_ | `true` |
| Attribute | Description | Type | Default |
| --------- | ---------------------------------------------- | -------- | --------- |
| color | Loading color | _string_ | `#00BCD4` |
| type | Can be set to `wave` `cube` `rect` `disappear` | _string_ | `wave` |
| size | Can be set to `large` `normal` `small` `mini` | _string_ | `normal` |

### Slots

Expand Down
31 changes: 5 additions & 26 deletions packages/varlet-ui/src/loading/docs/zh_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,36 +30,15 @@ export default defineComponent({
<varlet-loading type="disappear" size="small" />
```

### Loading 文本

```html
<varlet-loading type="cube">加载中</varlet-loading>
<varlet-loading type="wave">加载中</varlet-loading>
<varlet-loading type="rect">加载中</varlet-loading>
<varlet-loading type="disappear">加载中</varlet-loading>
```

### 水平排列

```html
<varlet-loading type="cube" :vertical="false">加载中</varlet-loading>
<varlet-loading type="wave" :vertical="false">加载中</varlet-loading>
<varlet-loading type="rect" :vertical="false">加载中</varlet-loading>
<varlet-loading type="disappear" :vertical="false">加载中</varlet-loading>
```

## API

### 属性

| 参数 | 说明 | 类型 | 默认值 |
| --------- | --------------------------------------------------------- | --------- | --------- |
| color | loading 的颜色 | _string_ | `#00BCD4` |
| type | loading 的类型，可选值为 `wave` `cube` `rect` `disappear` | _string_ | `wave` |
| size | loading 的大小，可选值位 `large` `normal` `small` `mini` | _string_ | `normal` |
| fontColor | 文字颜色 | _string_ | `#ccc` |
| fontSize | 字体大小 | _number_ | `14` |
| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `true` |
| 参数 | 说明 | 类型 | 默认值 |
| ----- | --------------------------------------------------------- | -------- | --------- |
| color | loading 的颜色 | _string_ | `#00BCD4` |
| type | loading 的类型，可选值为 `wave` `cube` `rect` `disappear` | _string_ | `wave` |
| size | loading 的大小，可选值位 `large` `normal` `small` `mini` | _string_ | `normal` |

### Slots

Expand Down
26 changes: 0 additions & 26 deletions packages/varlet-ui/src/loading/example/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,6 @@
<varlet-loading type="disappear" size="small" />
</div>
</div>
<div class="loading-demo__text">
<app-type>Text</app-type>
<div class="loading-demo__text-block">
<varlet-loading type="cube" size="small">加载中</varlet-loading>
<varlet-loading type="wave" size="small">加载中</varlet-loading>
<varlet-loading type="rect" size="small">加载中</varlet-loading>
<varlet-loading type="disappear" size="small">加载中</varlet-loading>
</div>
</div>
<div class="loading-demo__text">
<app-type>Horizontal</app-type>
<div class="loading-demo__text-block">
<varlet-loading type="cube" size="small" :vertical="false">
加载中
</varlet-loading>
<varlet-loading type="wave" size="small" :vertical="false">
加载中
</varlet-loading>
<varlet-loading type="rect" size="small" :vertical="false">
加载中
</varlet-loading>
<varlet-loading type="disappear" size="small" :vertical="false">
加载中
</varlet-loading>
</div>
</div>
</div>
</template>

Expand Down
44 changes: 21 additions & 23 deletions packages/varlet-ui/src/loading/loading.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@
align-items: center;

&__wave {
@loading-cube-size-item-width: 5px;
@loading-cube-size-item-margin: 5px;
@loading-wave-size-item-width: 5px;
@loading-wave-size-item-margin: 5px;

text-align: center;
display: flex;
align-items: center;
justify-content: center;

&-large {
width: @loading-large-width;
Expand Down Expand Up @@ -71,24 +73,24 @@
}

&-item-large {
width: @loading-cube-size-item-width;
margin-left: @loading-cube-size-item-margin;
width: @loading-wave-size-item-width;
margin-left: @loading-wave-size-item-margin;
}

&-item-normal {
width: @loading-cube-size-item-width - 1;
margin-left: @loading-cube-size-item-margin - 1;
width: @loading-wave-size-item-width - 1;
margin-left: @loading-wave-size-item-margin - 1;

}

&-item-small {
width: @loading-cube-size-item-width - 2;
margin-left: @loading-cube-size-item-margin - 2;
width: @loading-wave-size-item-width - 2;
margin-left: @loading-wave-size-item-margin - 2;
}

&-item-mini {
width: @loading-cube-size-item-width - 3;
margin-left: @loading-cube-size-item-margin - 3;
width: @loading-wave-size-item-width - 3;
margin-left: @loading-wave-size-item-margin - 3;
}

@keyframes wave {
Expand All @@ -103,8 +105,8 @@
}

&__cube {
@loading-cube-size-item-width: 14px;
@loading-cube-size-item-height: 14px;
@loading-cube-size-item-width: 10px;
@loading-cube-size-item-height: 10px;
@loading-cube-size-item-margin: 5px;

display: flex;
Expand Down Expand Up @@ -161,21 +163,21 @@
}

&-item-normal {
height: @loading-cube-size-item-height - 3;
width: @loading-cube-size-item-width - 3;
height: @loading-cube-size-item-height - 2;
width: @loading-cube-size-item-width - 2;
margin-left: @loading-cube-size-item-margin - 1;

}

&-item-small {
height: @loading-cube-size-item-height - 6;
width: @loading-cube-size-item-width - 6;
height: @loading-cube-size-item-height - 4;
width: @loading-cube-size-item-width - 4;
margin-left: @loading-cube-size-item-margin - 2;
}

&-item-mini {
height: @loading-cube-size-item-height - 9;
width: @loading-cube-size-item-width - 9;
height: @loading-cube-size-item-height - 6;
width: @loading-cube-size-item-width - 6;
margin-left: @loading-cube-size-item-margin - 3;
}

Expand Down Expand Up @@ -373,8 +375,4 @@
}
}
}

&__text {
margin: 5px;
}
}
15 changes: 0 additions & 15 deletions packages/varlet-ui/src/loading/propsEmits.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,4 @@ export const props = {
type: String,
default: 'currentColor',
},
// 文字颜色
fontColor: {
type: String,
default: '#ccc',
},
// 字体大小
fontSize: {
type: Number,
default: 14,
},
// 是否垂直排列图标和文字内容
vertical: {
type: Boolean,
default: true,
},
}

0 comments on commit 86ec547

Please sign in to comment.