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

docs(Button): adjust demo order

Browse Source
This commit is contained in:
chenjiahan 2020-03-21 06:49:40 +08:00 committed by neverland
parent 163ac52542
commit 713b31f799
2 changed files with 65 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
example/pages/button/index.wxml
View File

@ -1,4 +1,3 @@
<demo-block title="按钮类型" padding> <demo-block title="按钮类型" padding>
<view class="row"> <view class="row">
<van-button class="demo-margin-right">默认按钮</van-button> <van-button class="demo-margin-right">默认按钮</van-button>
@ -48,14 +47,13 @@
<van-button type="primary" size="mini">迷你按钮</van-button> <van-button type="primary" size="mini">迷你按钮</van-button>
</demo-block> </demo-block>
<demo-block title="自定义颜色" padding>
<van-button color="#7232dd" class="demo-margin-right">单色按钮</van-button>
<van-button color="#7232dd" class="demo-margin-right" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
</demo-block>
<demo-block title="块级元素" padding> <demo-block title="块级元素" padding>
<van-button type="primary" custom-class="demo-margin-bottom">普通按钮</van-button> <van-button type="primary" custom-class="demo-margin-bottom">普通按钮</van-button>
<van-button type="primary" block>块级元素</van-button> <van-button type="primary" block>块级元素</van-button>
</demo-block> </demo-block>
<demo-block title="自定义颜色" padding>
<van-button color="#7232dd" class="demo-margin-right">单色按钮</van-button>
<van-button color="#7232dd" class="demo-margin-right" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
</demo-block>

30
packages/button/README.md
View File

@ -59,6 +59,13 @@
<van-button loading type="info" loading-text="加载中..." /> <van-button loading type="info" loading-text="加载中..." />
``` ```
### 按钮形状
```html
<van-button square type="primary">方形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>
```
### 图标按钮 ### 图标按钮
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL 通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
@ -69,13 +76,6 @@
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button> <van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button>
``` ```
### 按钮形状
```html
<van-button square type="primary">方形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>
```
### 按钮尺寸 ### 按钮尺寸
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal` 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
@ -87,6 +87,14 @@
<van-button type="primary" size="mini">迷你按钮</van-button> <van-button type="primary" size="mini">迷你按钮</van-button>
``` ```
### 块级元素
通过`block`属性可以将按钮的元素类型设置为块级元素
```html
<van-button type="primary" block>块级元素</van-button>
```
### 自定义颜色 ### 自定义颜色
通过`color`属性可以自定义按钮的颜色 通过`color`属性可以自定义按钮的颜色
@ -97,14 +105,6 @@
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button> <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
``` ```
### 块级元素
通过`block`属性可以将按钮的元素类型设置为块级元素
```html
<van-button type="primary" block>块级元素</van-button>
```
## API ## API
### Props ### Props