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

增加zan-layout

Browse Source
This commit is contained in:
niunai
2017-03-03 17:58:08 +08:00
parent cead595693
commit e918c52fd0
23 changed files with 337 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,6 +64,21 @@
</div>
```
### loading按钮
表示loading状态
```html
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button type="primary" loading>111</zan-button>
</div>
<div class="zan-button-1">
<zan-button loading>222</zan-button>
</div>
</div>
```
### button group
一组按钮。

0
docs/examples-docs/layout.md Normal file
View File

92
docs/examples/button.vue
View File

@@ -2,52 +2,62 @@
<div class="page-button">
<h1 class="page-title">Button</h1>
<h2 class="page-sub-title">按钮功能</h2>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button>default</zan-button>
</div>
<div class="zan-button-1">
<zan-button type="primary">primary</zan-button>
</div>
<div class="zan-button-1">
<zan-button type="danger">danger</zan-button>
</div>
</div>
<zan-row>
<zan-col span="24">
<zan-button block>default</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="primary" block>primary</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="danger" block>danger</zan-button>
</zan-col>
</zan-row>
<h2 class="page-sub-title">禁用状态</h2>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button disabled>diabled</zan-button>
</div>
</div>
<zan-row>
<zan-col span="24">
<zan-button disabled block>diabled</zan-button>
</zan-col>
</zan-row>
<h2 class="page-sub-title">按钮尺寸</h2>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-row>
<zan-col span="24">
<zan-button size="large">large</zan-button>
</div>
</div>
<div class="zan-button-group">
<div class="zan-button-3">
<zan-button type="primary">normal</zan-button>
</div>
<div class="zan-button-3">
<zan-button size="small">small</zan-button>
</div>
<div class="zan-button-3">
<zan-button size="mini">mini</zan-button>
</div>
</div>
</zan-col>
</zan-row>
<zan-row gutter="10">
<zan-col span="8">
<zan-button type="primary" block>normal</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="small" block>small</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="mini" block>mini</zan-button>
</zan-col>
</zan-row>
<h2 class="page-sub-title">自定义按钮标签</h2>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-row>
<zan-col span="24">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
</div>
</div>
</zan-col>
</zan-row>
<h2 class="page-sub-title">loading</h2>
<zan-row>
<zan-col span="24">
<zan-button type="primary" loading block>loading</zan-button>
</zan-col>
<zan-col span="24">
<zan-button loading block></zan-button>
</zan-col>
</zan-row>
<h2 class="page-sub-title">button group</h2>
<div class="zan-button-group">
<div class="button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
@@ -62,11 +72,11 @@
}
}
@component-namespace zan {
@b button-group {
.zan-button-1 {
margin-bottom: 10px;
}
@b col {
margin-bottom: 10px;
}
}
.button-group {
font-size: 0;
}
</style>

0
docs/examples/layout.vue Normal file
View File