mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] add spinner type loading (#297)
* [bugfix] CouponList always show empty info * [bugfix] add click feedback of buttons in components * [Doc] add custom theme document * [new feature] Notice bar support more props * [bugfix] PullRefresh test cases * [bugfix] unused NoticeBar style * [bugfix] Swipe width calc error * [Doc] english document of all action components * [Doc] change document site path to /zanui/vant * [Doc] fix * [bugfix] uploader style error * [bugfix] tabs document demo * [new feature] Cell support vue-router target route * [bugfix] add cell test cases * update yarn.lock * [bugfix] Tabbar cann't display info when use icon slot * [Doc] update document title * [bugfix] Dialog should reset button text when showed * [new feature] CouponList add showCloseButton prop * [new feature] Swipe add 'initialSwipe' prop * [bugfix] NoticeBar text disappeared when page back * [new feature] ImagePreview support startPosition * fix: improve imagePreview test cases * [bugfix] Steps style error when has more than 4 items * [new feature] normalize size of all icons * [new feature] Stepper add plus & minus event * fix: yarn.lock * [bugfix] addressEdit icon render failed * [new feature] toast add mask option * [new feature] add spinner type loading
This commit is contained in:
parent
257654ff03
commit
874dd0cefa
@ -9,27 +9,36 @@ Vue.component(Loading.name, Loading);
|
||||
|
||||
### Usage
|
||||
|
||||
#### Solid color
|
||||
#### Solid Circle
|
||||
|
||||
:::demo Solid color
|
||||
:::demo Solid Circle
|
||||
```html
|
||||
<van-loading type="circle" color="black"></van-loading>
|
||||
<van-loading type="circle" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Gradient color
|
||||
#### Gradient Circle
|
||||
|
||||
:::demo Gradient color
|
||||
:::demo Gradient Circle
|
||||
```html
|
||||
<van-loading type="gradient-circle" color="black"></van-loading>
|
||||
<van-loading type="gradient-circle" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Spinner
|
||||
|
||||
:::demo Spinner
|
||||
```html
|
||||
<van-loading type="spinner" color="black"></van-loading>
|
||||
<van-loading type="spinner" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | Color | `String` | `black` | `black` `white` |
|
||||
| type | Type | `String` | `gradient-circle` | `gradient-circle` `circle` |
|
||||
| type | Type | `String` | `gradient-circle` | `spinner` `circle` |
|
||||
|
@ -18,27 +18,36 @@ Vue.component(Loading.name, Loading);
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 单色 spinner
|
||||
#### 单色圆环
|
||||
|
||||
:::demo 单色 spinner
|
||||
:::demo 单色圆环
|
||||
```html
|
||||
<van-loading type="circle" color="black"></van-loading>
|
||||
<van-loading type="circle" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 渐变色 spinner
|
||||
#### 渐变色圆环
|
||||
|
||||
:::demo 渐变色 spinner
|
||||
:::demo 渐变色圆环
|
||||
```html
|
||||
<van-loading type="gradient-circle" color="black"></van-loading>
|
||||
<van-loading type="gradient-circle" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Spinner
|
||||
|
||||
:::demo Spinner
|
||||
```html
|
||||
<van-loading type="spinner" color="black"></van-loading>
|
||||
<van-loading type="spinner" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | 颜色 | `String` | `black` | `black` `white` |
|
||||
| type | 类型 | `String` | `gradient-circle` | `gradient-circle` `circle` |
|
||||
| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
|
||||
|
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div :class="['van-loading', 'van-loading--' + type]">
|
||||
<span :class="['van-loading__spinner', 'van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
|
||||
<div :class="['van-loading', 'van-loading--' + type, 'van-loading--' + color]">
|
||||
<span :class="['van-loading__spinner', 'van-loading__spinner--' + type, 'van-loading__spinner--' + color]">
|
||||
<i v-if="type === 'spinner'" v-for="item in 12"></i>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const VALID_TYPES = ['gradient-circle', 'circle'];
|
||||
const VALID_TYPES = ['gradient-circle', 'circle', 'spinner'];
|
||||
const VALID_COLORS = ['black', 'white'];
|
||||
|
||||
export default {
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user