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

vant components

Browse Source
This commit is contained in:
cookfront
2017-04-19 17:44:57 +08:00
parent c6014ad62d
commit 06e333eb3e
145 changed files with 1679 additions and 1619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,10 @@
<style>
@component-namespace demo {
@b layout {
.zan-row {
.van-row {
padding: 0 20px;
}
.zan-col {
.van-col {
margin-bottom: 10px;
}
}
@@ -30,11 +30,11 @@
## Layout 布局
主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
主要提供了`van-row`和`van-col`两个组件来进行行列布局。
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
@@ -42,9 +42,9 @@
```js
import Vue from 'vue';
import { Row, Col } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/col.css';
import '@youzan/zanui-vue/lib/zanui-css/row.css';
import { Row, Col } from 'vant';
import 'vant/lib/vant-css/col.css';
import 'vant/lib/vant-css/row.css';
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
@@ -55,12 +55,12 @@ Vue.component(Col.name, Col);
如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
```js
import { Row, Col } from '@youzan/zanui-vue';
import { Row, Col } from 'vant';
export default {
components: {
'zan-row': Row,
'zan-col': Col
'van-row': Row,
'van-col': Col
}
};
```
@@ -69,54 +69,54 @@ export default {
#### 常规用法
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
:::demo 常规用法
```html
<zan-row>
<zan-col span="8">
<van-row>
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
<zan-col span="8">
</van-col>
<van-col span="8">
<div class="white">span: 8</div>
</zan-col>
<zan-col span="8">
</van-col>
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="4">
</van-col>
</van-row>
<van-row>
<van-col span="4">
<div class="gray">span: 4</div>
</zan-col>
<zan-col span="10" offset="4">
</van-col>
<van-col span="10" offset="4">
<div class="gray">offset: 4, span: 10</div>
</zan-col>
</zan-row>
<zan-row>
<zan-col offset="12" span="12">
</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">
<div class="gray">offset: 12, span: 12</div>
</zan-col>
</zan-row>
</van-col>
</van-row>
```
:::
#### 在列元素之间增加间距
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
:::demo 在列元素之间增加间距
```html
<zan-row gutter="10">
<zan-col span="8">
<van-row gutter="10">
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
<zan-col span="8">
</van-col>
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
<zan-col span="8">
</van-col>
<van-col span="8">
<div class="gray">span: 8</div>
</zan-col>
</zan-row>
</van-col>
</van-row>
```
:::