[Improvement] Loading: change default type to circular (#623)

This commit is contained in:
neverland
2018-02-08 09:47:15 +08:00
committed by GitHub
parent 2a3c75bc2f
commit c11c0bb4c7
14 changed files with 50 additions and 67 deletions
+7 -14
View File
@@ -9,18 +9,11 @@ Vue.use(Loading);
### Usage
#### Solid Circle
#### Circular
```html
<van-loading type="circle" color="black" />
<van-loading type="circle" color="white" />
```
#### Gradient Circle
```html
<van-loading type="gradient-circle" color="black" />
<van-loading type="gradient-circle" color="white" />
<van-loading color="black" />
<van-loading color="white" />
```
#### Spinner
@@ -30,11 +23,11 @@ Vue.use(Loading);
<van-loading type="spinner" color="white" />
```
#### Circular
#### Circle
```html
<van-loading type="circular" color="black" />
<van-loading type="circular" color="white" />
<van-loading type="circle" color="black" />
<van-loading type="circle" color="white" />
```
### API
@@ -42,5 +35,5 @@ Vue.use(Loading);
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| color | Color | `String` | `black` | `black` `white` |
| type | Type | `String` | `gradient-circle` | `spinner` `circle` |
| type | Type | `String` | `circular` | `spinner` `circle` |
| size | Size | `String` | `30px` | - |
+4 -1
View File
@@ -18,7 +18,10 @@ Toast('Some messages');
#### Loading
```javascript
Toast.loading({ mask: true });
Toast.loading({
mask: true,
message: 'Loading...'
});
```
+7 -14
View File
@@ -9,18 +9,11 @@ Vue.use(Loading);
### 代码演示
#### 单色圆环
#### Circular
```html
<van-loading type="circle" color="black" />
<van-loading type="circle" color="white" />
```
#### 渐变色圆环
```html
<van-loading type="gradient-circle" color="black" />
<van-loading type="gradient-circle" color="white" />
<van-loading color="black" />
<van-loading color="white" />
```
#### Spinner
@@ -30,11 +23,11 @@ Vue.use(Loading);
<van-loading type="spinner" color="white" />
```
#### Circular
#### Circle
```html
<van-loading type="circular" color="black" />
<van-loading type="circular" color="white" />
<van-loading type="circle" color="black" />
<van-loading type="circle" color="white" />
```
### API
@@ -42,5 +35,5 @@ Vue.use(Loading);
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| color | 颜色 | `String` | `black` | `black` `white` |
| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
| type | 类型 | `String` | `circular` | `spinner` `circle` |
| size | 大小 | `String` | `30px` | - |
+4 -1
View File
@@ -18,7 +18,10 @@ Toast('我是提示文案,建议不超过十五字~');
#### 加载提示
```javascript
Toast.loading({ mask: true });
Toast.loading({
mask: true,
message: '加载中...'
});
```