blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-08-09 22:49:45 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Button: add info type (#1340)

Browse Source
This commit is contained in:
neverland 2019-02-24 16:50:34 +08:00 committed by GitHub
parent ca636d329b
commit 082fcbb0db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,11 @@
<demo-section> <demo-section>
<demo-block title="按钮类型" padding> <demo-block title="按钮类型" padding>
<view class="row"> <view class="row">
<van-button class="demo-margin-right">默认按钮</van-button>
<van-button type="primary" class="demo-margin-right">主要按钮</van-button> <van-button type="primary" class="demo-margin-right">主要按钮</van-button>
<van-button type="danger">危险按钮</van-button> <van-button type="info" class="demo-margin-right">信息按钮</van-button>
</view> </view>
<van-button class="demo-margin-right">默认按钮</van-button> <van-button type="danger" class="demo-margin-right">危险按钮</van-button>
<van-button type="warning">警告按钮</van-button> <van-button type="warning">警告按钮</van-button>
</demo-block> </demo-block>

6
packages/button/README.md
View File

@ -11,11 +11,13 @@
### 代码演示 ### 代码演示
#### 按钮类型 #### 按钮类型
支持`default`、`primary`、`warning`、`danger`四种类型，默认为`default`
支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
```html ```html
<van-button type="default">默认按钮</van-button> <van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button> <van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button> <van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button> <van-button type="danger">危险按钮</van-button>
``` ```
@ -65,7 +67,7 @@
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| id | 标识符 | `String` | - | | id | 标识符 | `String` | - |
| type | 按钮类型，可选值为 `primary` `warning` `danger` | `String` | `default` | | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` |
| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` | | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
| plain | 是否为朴素按钮 | `Boolean` | `false` | | plain | 是否为朴素按钮 | `Boolean` | `false` |
| block | 是否为块级元素 | `Boolean` | `false` | | block | 是否为块级元素 | `Boolean` | `false` |

10
packages/button/index.less
View File

@ -49,6 +49,12 @@
border: 1px solid @button-primary-border-color; border: 1px solid @button-primary-border-color;
} }
&--info {
color: @button-info-color;
background-color: @button-info-background-color;
border: 1px solid @button-info-border-color;
}
&--danger { &--danger {
color: @button-danger-color; color: @button-danger-color;
background-color: @button-danger-background-color; background-color: @button-danger-background-color;
@ -68,6 +74,10 @@
color: @button-primary-background-color; color: @button-primary-background-color;
} }
&.van-button--info {
color: @button-info-background-color;
}
&.van-button--danger { &.van-button--danger {
color: @button-danger-background-color; color: @button-danger-background-color;
} }

3
packages/common/style/var.less
View File

@ -26,6 +26,9 @@
@button-primary-color: @white; @button-primary-color: @white;
@button-primary-background-color: @green; @button-primary-background-color: @green;
@button-primary-border-color: @green; @button-primary-border-color: @green;
@button-info-color: @white;
@button-info-background-color: @blue;
@button-info-border-color: @blue;
@button-danger-color: @white; @button-danger-color: @white;
@button-danger-background-color: @red; @button-danger-background-color: @red;
@button-danger-border-color: @red; @button-danger-border-color: @red;