ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-22 11:54:02 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

按钮新增类型，layout补全文档

Browse Source
This commit is contained in:
niunai
2017-03-30 14:23:36 +08:00
parent 7bbb53e5f5
commit 874df43df0
9 changed files with 150 additions and 41 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 | |