blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-27 20:06:36 +08:00
Code Issues Projects Releases Wiki Activity

update layout doc

Browse Source
This commit is contained in:
niunai 2017-04-06 15:53:01 +08:00
parent 544c21e798
commit bc699541ce
1 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
docs/examples-docs/layout.md
View File

@ -12,11 +12,19 @@
.gray { .gray {
height: 30px; height: 30px;
line-height: 30px;
font-size: 12px;
background: #666; background: #666;
color: #fff;
text-align: center;
} }
.white { .white {
height: 30px; height: 30px;
line-height: 30px;
font-size: 12px;
background: #fff; background: #fff;
color: #333;
text-align: center;
} }
</style> </style>
@ -30,18 +38,26 @@ Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设
```html ```html
<zan-row> <zan-row>
<zan-col span="8"> <zan-col span="8">
<div class="gray"></div> <div class="gray">span: 8</div>
</zan-col> </zan-col>
<zan-col span="8"> <zan-col span="8">
<div class="white"></div> <div class="white">span: 8</div>
</zan-col> </zan-col>
<zan-col span="8"> <zan-col span="8">
<div class="gray"></div> <div class="gray">span: 8</div>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="4">
<div class="gray">span: 4</div>
</zan-col>
<zan-col span="10" offset="4">
<div class="gray">offset: 4, span: 10</div>
</zan-col> </zan-col>
</zan-row> </zan-row>
<zan-row> <zan-row>
<zan-col offset="12" span="12"> <zan-col offset="12" span="12">
<div class="gray"></div> <div class="gray">offset: 12, span: 12</div>
</zan-col> </zan-col>
</zan-row> </zan-row>
``` ```
@ -54,14 +70,27 @@ Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设
```html ```html
<zan-row gutter="10"> <zan-row gutter="10">
<zan-col span="8"> <zan-col span="8">
<div class="gray"></div> <div class="gray">span: 8</div>
</zan-col> </zan-col>
<zan-col span="8"> <zan-col span="8">
<div class="white"></div> <div class="gray">span: 8</div>
</zan-col> </zan-col>
<zan-col span="8"> <zan-col span="8">
<div class="gray"></div> <div class="gray">span: 8</div>
</zan-col> </zan-col>
</zan-row> </zan-row>
``` ```
::: :::
### API
#### Row
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | |
#### Column
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| span | 列元素宽度 | `String | Number` | - | |
| offset | 列元素偏移宽度 | `String | Number` | - | |