文档优化

This commit is contained in:
cookfront
2017-03-06 15:16:02 +08:00
parent 76fa89a49c
commit 7093f1772f
26 changed files with 403 additions and 132 deletions

View File

@@ -1,33 +1,5 @@
l## Switch组件
### 基础用法
```html
<template>
<div class="page-loading">
<h1 class="page-title">Loading</h1>
<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{
.demo-loading__example{
width: 30px;
height: 30px;
padding: 20px;
@@ -36,11 +8,38 @@ l## Switch组件
border: 1px solid transparent;
}
.page-loading__example--with-bg {
.demo-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
}
.page-loading {
.demo-loading {
padding: 0 20px;
}
</style>
</style>
## Loading
### 基础用法
:::demo
```html
<div class="demo-loading">
<h2 class="demo-sub-title">渐变深色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class"></zan-loading>
</div>
<h2 class="demo-sub-title">渐变浅色spinner</h2>
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
<h2 class="demo-sub-title">单色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
</div>
<h2 class="demo-sub-title">单色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
</div>
</div>
```
:::