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

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

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

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

@ -4,11 +4,11 @@ exports[`renders demo correctly 1`] = `
<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: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 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--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--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:#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>
`;

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

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