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

rename

Browse Source
This commit is contained in:
niunai 2017-02-24 18:08:15 +08:00
parent 99d7b41473
commit 7087621fbb
2 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/examples/button.md
View File

@ -1,7 +1,7 @@
<style lang="css"> <style lang="css">
@component-namespace z { @component-namespace z {
@component button-group { @component button-group {
.z-button-1-1 { .z-button-1 {
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
@ -15,13 +15,13 @@
:::demo 只接受primary, default, danger三种类型，默认default :::demo 只接受primary, default, danger三种类型，默认default
```html ```html
<div class="z-button-group"> <div class="z-button-group">
<div class="z-button-1-1"> <div class="z-button-1">
<z-button>default</z-button> <z-button>default</z-button>
</div> </div>
<div class="z-button-1-1"> <div class="z-button-1">
<z-button type="primary">primary</z-button> <z-button type="primary">primary</z-button>
</div> </div>
<div class="z-button-1-1"> <div class="z-button-1">
<z-button type="danger">danger</z-button> <z-button type="danger">danger</z-button>
</div> </div>
</div> </div>
@ -33,7 +33,7 @@
:::demo :::demo
```html ```html
<div class="z-button-group"> <div class="z-button-group">
<div class="z-button-1-1"> <div class="z-button-1">
<z-button disabled>diabled</z-button> <z-button disabled>diabled</z-button>
</div> </div>
</div> </div>
@ -45,18 +45,18 @@
:::demo 只接受large, normal, small, mini四种尺寸，默认normal :::demo 只接受large, normal, small, mini四种尺寸，默认normal
```html ```html
<div class="z-button-group"> <div class="z-button-group">
<div class="z-button-1-1"> <div class="z-button-1">
<z-button size="large">large</z-button> <z-button size="large">large</z-button>
</div> </div>
</div> </div>
<div class="z-button-group" :style="{ width: '50%' }"> <div class="z-button-group" :style="{ width: '50%' }">
<div class="z-button-3-1"> <div class="z-button-3">
<z-button type="primary">normal</z-button> <z-button type="primary">normal</z-button>
</div> </div>
<div class="z-button-3-1"> <div class="z-button-3">
<z-button size="small">small</z-button> <z-button size="small">small</z-button>
</div> </div>
<div class="z-button-3-1"> <div class="z-button-3">
<z-button size="mini">mini</z-button> <z-button size="mini">mini</z-button>
</div> </div>
</div> </div>
@ -69,13 +69,24 @@
:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签 :::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
```html ```html
<div class="z-button-group"> <div class="z-button-group">
<div class="z-button-1-1"> <div class="z-button-1">
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button> <z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
</div> </div>
</div> </div>
``` ```
::: :::
### button group
:::demo 一组按钮
```html
<div class="z-button-group">
<z-button type="primary" size="small">确认付款</z-button>
<z-button size="small">确认收货</z-button>
<z-button size="small">取消订单</z-button>
</div>
```
:::
### API ### API

15
packages/zanui-css/src/button_group.pcss
View File

@ -2,7 +2,7 @@
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
padding-right: 10px; padding-right: 10px;
&:last-child { &::last-child {
padding-right: 0; padding-right: 0;
} }
.z-button { .z-button {
@ -13,16 +13,23 @@
@component-namespace z { @component-namespace z {
@b button-group { @b button-group {
font-size: 0; font-size: 0;
> .z-button {
margin-right: 10px;
&::last-child {
margin-right: 0;
}
}
} }
@b button-1-1 { @b button-1 {
@mixin button-wrap; @mixin button-wrap;
width: 100%; width: 100%;
} }
@b button-2-1 { @b button-2 {
@mixin button-wrap; @mixin button-wrap;
width: 50%; width: 50%;
} }
@b button-3-1 { @b button-3 {
@mixin button-wrap; @mixin button-wrap;
width: 33.33%; width: 33.33%;
} }