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

[Doc] Loading: update demo

Browse Source
This commit is contained in:
陈嘉涵 2019-04-30 15:43:46 +08:00
parent 70351dc4f0
commit 4f516f450c
4 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/loading/demo/index.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('title1')"> <demo-block :title="$t('loadingType')">
<van-loading /> <van-loading />
<van-loading color="white" /> <van-loading type="spinner" />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('loadingColor')">
<van-loading type="spinner" /> <van-loading color="#1989fa" />
<van-loading <van-loading
type="spinner" type="spinner"
color="white" color="#1989fa"
/> />
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -19,12 +19,12 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
title1: 'Circular', loadingType: '加载类型',
title2: 'Spinner' loadingColor: '自定义颜色'
}, },
'en-US': { 'en-US': {
title1: 'Circular', loadingType: 'Type',
title2: 'Spinner' loadingColor: 'Color'
} }
} }
}; };
@ -36,11 +36,5 @@ export default {
display: inline-block; display: inline-block;
margin: 5px 0 5px 20px; margin: 5px 0 5px 20px;
} }
.van-loading--white {
padding: 10px;
border-radius: 3px;
background-color: rgba(0, 0, 0, .5);
}
} }
</style> </style>

10
packages/loading/en-US.md
View File

@ -9,18 +9,18 @@ Vue.use(Loading);
### Usage ### Usage
#### Circular #### Type
```html ```html
<van-loading /> <van-loading />
<van-loading color="white" /> <van-loading type="spinner" />
``` ```
#### Spinner #### Color
```html ```html
<van-loading type="spinner" /> <van-loading color="#1989fa" />
<van-loading type="spinner" color="white" /> <van-loading type="spinner" color="#1989fa" />
``` ```
### API ### API

6
packages/loading/test/__snapshots__/demo.spec.js.snap
View File

@ -4,11 +4,11 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <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 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 class="van-loading van-loading--circular" style="color:white;"><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--spinner" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div> </div>
<div> <div>
<div class="van-loading van-loading--spinner" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div> <div class="van-loading van-loading--circular" style="color:#1989fa;"><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--spinner" style="color:white;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div> <div class="van-loading van-loading--spinner" style="color:#1989fa;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div> </div>
</div> </div>
`; `;

10
packages/loading/zh-CN.md
View File

@ -9,18 +9,18 @@ Vue.use(Loading);
### 代码演示 ### 代码演示
#### Circular #### 加载类型
```html ```html
<van-loading /> <van-loading />
<van-loading color="white" /> <van-loading type="spinner" />
``` ```
#### Spinner #### 自定义颜色
```html ```html
<van-loading type="spinner" /> <van-loading color="#1989fa" />
<van-loading type="spinner" color="white" /> <van-loading type="spinner" color="#1989fa" />
``` ```
### API ### API