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

[new feature] Button: add color prop (#1869)

Browse Source
This commit is contained in:
neverland 2019-08-15 20:30:29 +08:00 committed by GitHub
parent ec62760bde
commit dbb74fedf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,9 +41,14 @@
</demo-block> </demo-block>
<demo-block title="按钮尺寸" padding> <demo-block title="按钮尺寸" padding>
<van-button size="large" block custom-class="demo-margin-bottom">大号按钮</van-button> <van-button type="primary" size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
<van-button class="demo-margin-right">普通按钮</van-button> <van-button type="primary" class="demo-margin-right">普通按钮</van-button>
<van-button size="small" class="demo-margin-right">小型按钮</van-button> <van-button type="primary" size="small" class="demo-margin-right">小型按钮</van-button>
<van-button size="mini">迷你按钮</van-button> <van-button type="primary" size="mini">迷你按钮</van-button>
</demo-block>
<demo-block title="自定义颜色" padding>
<van-button color="#7232dd" class="demo-margin-right">自定义颜色</van-button>
<van-button color="#7232dd" plain>自定义颜色</van-button>
</demo-block> </demo-block>
</demo-section> </demo-section>

18
packages/button/README.md
View File

@ -77,13 +77,23 @@
``` ```
### 按钮尺寸 ### 按钮尺寸
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal` 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
```html ```html
<van-button size="large">大号按钮</van-button> <van-button type="primary" size="large">大号按钮</van-button>
<van-button size="normal">普通按钮</van-button> <van-button type="primary" size="normal">普通按钮</van-button>
<van-button size="small">小型按钮</van-button> <van-button type="primary" size="small">小型按钮</van-button>
<van-button size="mini">迷你按钮</van-button> <van-button type="primary" size="mini">迷你按钮</van-button>
```
### 自定义颜色
通过`color`属性可以自定义按钮的颜色
```html
<van-button color="#7232dd">自定义颜色</van-button>
<van-button color="#7232dd" plain>自定义颜色</van-button>
``` ```
### Props ### Props

1
packages/button/index.ts
View File

@ -9,6 +9,7 @@ VantComponent({
props: { props: {
icon: String, icon: String,
color: String,
plain: Boolean, plain: Boolean,
block: Boolean, block: Boolean,
round: Boolean, round: Boolean,

1
packages/button/index.wxml
View File

@ -5,6 +5,7 @@
class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}" class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
open-type="{{ openType }}" open-type="{{ openType }}"
hover-class="van-button--active hover-class" hover-class="van-button--active hover-class"
style="{{ color ? 'border-color: ' + color + ';' + (plain ? 'color: ' + color : 'color: #fff; background-color: ' + color) : '' }}"
lang="{{ lang }}" lang="{{ lang }}"
business-id="{{ businessId }}" business-id="{{ businessId }}"
session-from="{{ sessionFrom }}" session-from="{{ sessionFrom }}"