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

引入vue-jsx， 按钮完善

Browse Source
This commit is contained in:
niunai
2017-02-20 01:10:00 +08:00
parent e415d039f0
commit 9a4ac14066
10 changed files with 170 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
docs/examples/button.md
View File

@@ -1,14 +1,8 @@
<style lang="css">
@component-namespace page {
@component button {
padding: 0 15px 15px;
@descendent group {
@component-namespace z {
@component button-group {
.z-button-1-1 {
margin-bottom: 15px;
& > * {
margin-bottom: 15px;
}
}
}
}
@@ -16,34 +10,67 @@
## Button组件
### 基础用法
### 按钮功能
:::demo 样例代码
:::demo 只接受primary, default, danger三种类型，默认default
```html
<div class="page-button">
<h1 class="page-title">Button</h1>
<div class="page-button-group">
<z-button size="large">default</z-button>
<z-button size="large" type="primary">primary</z-button>
<z-button size="large" type="danger">danger</z-button>
</div>
<div class="page-button-group">
<div class="z-button-group">
<div class="z-button-1-1">
<z-button>default</z-button>
</div>
<div class="z-button-1-1">
<z-button type="primary">primary</z-button>
</div>
<div class="z-button-1-1">
<z-button type="danger">danger</z-button>
</div>
</div>
```
:::
<div class="page-button-group">
<z-button size="small">default</z-button>
<z-button size="small" type="primary">primary</z-button>
<z-button size="small" type="danger">danger</z-button>
### 禁用状态
:::demo
```html
<div class="z-button-group">
<div class="z-button-1-1">
<z-button disabled>diabled</z-button>
</div>
</div>
```
:::
<div class="page-button-group">
<z-button disabled size="large">default</z-button>
<z-button disabled size="large" type="primary">primary</z-button>
<z-button disabled size="large" type="danger" class="aaa">danger</z-button>
### 按钮尺寸
:::demo 只接受large, normal, small, mini四种尺寸，默认normal
```html
<div class="z-button-group">
<div class="z-button-1-1">
<z-button size="large">large</z-button>
</div>
</div>
<div class="z-button-group" :style="{ width: '50%' }">
<div class="z-button-3-1">
<z-button type="primary">normal</z-button>
</div>
<div class="z-button-3-1">
<z-button size="small">small</z-button>
</div>
<div class="z-button-3-1">
<z-button size="mini">mini</z-button>
</div>
</div>
```
:::
### 自定义按钮标签
:::demo 有时按钮需要是一个a标签
```html
<div class="z-button-group">
<div class="z-button-1-1">
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
</div>
</div>
```
@@ -54,4 +81,9 @@
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
| type | 按钮类型 | string | 'default' | 'primary', 'danger' |
| size | 按钮尺寸 | string | 'normal' | 'large', 'small', 'mini' |
| tag | 按钮标签 | string | 'button' | 'a', 'span', ... |
| diabled | 按钮是否禁用 | Boolean | | |
| block | 按钮是否显示为块级元素 | Boolean | | |