ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-18 17:51:54 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: 更新loading

Browse Source
This commit is contained in:
jiangruowei
2017-03-02 19:58:26 +08:00
parent 7c6bfc6714
commit 26babf0b13
4 changed files with 129 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/examples-docs/loading.md
View File

@@ -6,9 +6,41 @@ l## Switch组件
<template>
<div class="page-loading">
<h1 class="page-title">Loading</h1>
<h2 class="page-sub-title">Loading展示</h2>
<div class="page-loading__example1">
<zan-loading class="some-customized-class" style="padding-top: 50px; text-align: center;"></zan-loading>
<h2 class="page-sub-title">渐变深色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class"></zan-loading>
</div>
<h2 class="page-sub-title">渐变浅色spinner</h2>
<div class="page-loading__example page-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
<h2 class="page-sub-title">单色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
</div>
<h2 class="page-sub-title">单色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
</div>
</div>
</template>
<style>
.page-loading__example{
width: 30px;
height: 30px;
padding: 20px;
margin: auto;
border-radius: 5px;
border: 1px solid transparent;
}
.page-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
}
.page-loading {
padding: 0 20px;
}
</style>

38
docs/examples/loading.vue
View File

@@ -1,9 +1,41 @@
<template>
<div class="page-loading">
<h1 class="page-title">Loading</h1>
<h2 class="page-sub-title">Loading展示</h2>
<div class="page-loading__example1">
<zan-loading class="some-customized-class" style="padding-top: 50px; text-align: center;"></zan-loading>
<h2 class="page-sub-title">渐变深色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class"></zan-loading>
</div>
<h2 class="page-sub-title">渐变浅色spinner</h2>
<div class="page-loading__example page-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
<h2 class="page-sub-title">单色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
</div>
<h2 class="page-sub-title">单色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
</div>
</div>
</template>
<style>
.page-loading__example{
width: 30px;
height: 30px;
padding: 20px;
margin: auto;
border-radius: 5px;
border: 1px solid transparent;
}
.page-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
}
.page-loading {
padding: 0 20px;
}
</style>