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

docs

Browse Source
This commit is contained in:
cookfront
2017-03-06 12:45:03 +08:00
parent 019bb5c7d8
commit 76fa89a49c
9 changed files with 179 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@
### 基础用法
:::demo
```html
<zan-badge-group active-key="2">
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
@@ -10,6 +11,7 @@
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
</zan-badge-group>
```
:::
### z-badge-group API

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

@@ -1,95 +1,123 @@
<style>
@component-namespace demo {
@b button {
.zan-row {
padding: 0 20px;
}
.zan-col {
margin-bottom: 10px;
}
.button-group {
font-size: 0;
padding: 0 20px;
}
}
}
</style>
## Button组件
### 按钮功能
只接受primary, default, danger三种类型，默认default。
:::demo
```html
<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>
```
:::
### 禁用状态
:::demo
```html
<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>
```
:::
### 按钮尺寸
只接受large, normal, small, mini四种尺寸，默认normal。
:::demo
```html
<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" :style="{ width: '50%' }">
<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>
```
:::
### 自定义按钮标签
按钮默认是button标签，可以使用tag属性修改为一个a标签。
:::demo
```html
<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>
```
:::
### loading按钮
表示loading状态
:::demo
```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>
<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>
```
:::
### button group
一组按钮。
:::demo
```html
<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>
</div>
```
:::
### API