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

Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

Browse Source
This commit is contained in:
cookfront
2017-03-30 14:27:59 +08:00
parent 969e1f78e1 69f106737f
commit a11ccb635b
12 changed files with 153 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/examples-docs/button.md
View File

@@ -7,10 +7,6 @@
.zan-col {
margin-bottom: 10px;
}
.button-group {
font-size: 0;
padding: 0 20px;
}
}
}
</style>
@@ -53,7 +49,7 @@
### 按钮尺寸
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
:::demo 按钮尺寸
```html
@@ -62,15 +58,19 @@
<zan-button size="large">large</zan-button>
</zan-col>
</zan-row>
<zan-row gutter="10">
<zan-col span="8">
<zan-button type="primary" block>normal</zan-button>
<zan-row>
<zan-col span="24">
<zan-button size="normal">normal</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="small" block>small</zan-button>
</zan-row>
<zan-row>
<zan-col span="24">
<zan-button size="small">small</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="mini" block>mini</zan-button>
</zan-row>
<zan-row>
<zan-col span="24">
<zan-button size="mini">mini</zan-button>
</zan-col>
</zan-row>
```
@@ -107,6 +107,27 @@
```
:::
### 页面底部操作按钮
一般用于fixed在底部的区域或是popup弹层的底部，一般只使用`primary`和`normal`两种状态。
:::demo
```html
<zan-row>
<zan-col span="24">
<zan-button type="primary" bottom-action>立即购买</zan-button>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="12">
<zan-button bottom-action>加入购物车</zan-button>
</zan-col>
<zan-col span="12">
<zan-button type="primary" bottom-action>立即购买</zan-button>
</zan-col>
</zan-row>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
@@ -114,6 +135,7 @@
| type | 按钮类型 | `string` | `default` | `primary`, `danger` |
| size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` |
| tag | 按钮标签 | `string` | `button` | `a`, `span`, ... |
| diabled | 按钮是否禁用 | `boolean` | | |
| block | 按钮是否显示为块级元素 | `boolean` | | |
| diabled | 按钮是否禁用 | `boolean` | false | |
| block | 按钮是否显示为块级元素 | `boolean` | false | |
| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | false | |

2
docs/examples-docs/icon.md
View File

@@ -29,7 +29,7 @@
<zan-icon name="check"></zan-icon>
<zan-icon name="checked"></zan-icon>
<zan-icon name="like-o"></zan-icon>
<zan-icon name="like"></zan-icon>
<zan-icon name="like" :style="{ color: '#f44' }"></zan-icon>
<zan-icon name="chat"></zan-icon>
<zan-icon name="shop"></zan-icon>
<zan-icon name="photograph"></zan-icon>

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

@@ -0,0 +1,67 @@
<style>
@component-namespace demo {
@b layout {
.zan-row {
padding: 0 20px;
}
.zan-col {
margin-bottom: 10px;
}
}
}
.gray {
height: 30px;
background: #666;
}
.white {
height: 30px;
background: #fff;
}
</style>
## Layout 布局
主要提供了 zan-row 和 zan-col 两个组件来进行行列布局
### 常规用法
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比（span / 24）；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
:::demo
```html
<zan-row>
<zan-col span="8">
<div class="gray"></div>
</zan-col>
<zan-col span="8">
<div class="white"></div>
</zan-col>
<zan-col span="8">
<div class="gray"></div>
</zan-col>
</zan-row>
<zan-row>
<zan-col offset="12" span="12">
<div class="gray"></div>
</zan-col>
</zan-row>
```
:::
### 在列元素之间增加间距
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
:::demo
```html
<zan-row gutter="10">
<zan-col span="8">
<div class="gray"></div>
</zan-col>
<zan-col span="8">
<div class="white"></div>
</zan-col>
<zan-col span="8">
<div class="gray"></div>
</zan-col>
</zan-row>
```
:::