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

[Improvement] Button: add warning type

Browse Source
This commit is contained in:
陈嘉涵 2018-07-30 17:28:49 +08:00
parent c059e1ef28
commit 746e11ab92
5 changed files with 34 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,19 @@
<demo-section>
<demo-block title="按钮类型">
<van-button type="default" custom-class="demo-margin-right">默认按钮</van-button>
<van-button type="primary" custom-class="demo-margin-right">主要按钮</van-button>
<view class="row">
<van-button type="default" custom-class="demo-margin-right">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
</view>
<van-button type="warning" custom-class="demo-margin-right">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</demo-block>
<demo-block title="朴素按钮">
<van-button type="default" plain custom-class="demo-margin-right">默认按钮</van-button>
<van-button type="primary" plain custom-class="demo-margin-right">主要按钮</van-button>
<view class="row">
<van-button type="default" plain custom-class="demo-margin-right">默认按钮</van-button>
<van-button type="primary" plain>主要按钮</van-button>
</view>
<van-button type="warning" plain custom-class="demo-margin-right">警告按钮</van-button>
<van-button type="danger" plain>危险按钮</van-button>
</demo-block>

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

@ -1,3 +1,8 @@
.loading {
margin: 0 18px;
}
.row {
height: 44px;
margin-bottom: 15px;
}

6
packages/button/README.md
View File

@ -11,11 +11,12 @@
### 代码演示
#### 按钮类型
支持`default`、`primary`、`danger`三种类型，默认为`default`
支持`default`、`primary`、`warning`、`danger`四种类型，默认为`default`
```html
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
```
@ -24,6 +25,7 @@
```html
<van-button type="default" plain>默认按钮</van-button>
<van-button type="primary" plain>主要按钮</van-button>
<van-button type="warning" plain>警告按钮</van-button>
<van-button type="danger" plain>危险按钮</van-button>
```
@ -55,7 +57,7 @@
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| type | 按钮类型，可选值为 `default` `primary` `danger` | `String` | `default` |
| type | 按钮类型，可选值为 `primary` `warning` `danger` | `String` | `default` |
| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
| plain | 是否为朴素按钮 | `Boolean` | `false` |
| disabled | 是否禁用 | `Boolean` | `false` |

26
packages/button/index.pcss
View File

@ -11,6 +11,7 @@
font-size: 16px;
text-align: center;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
&::after {
content: " ";
@ -53,6 +54,12 @@
border: 1px solid $button-danger-border-color;
}
&--warning {
color: $button-warning-color;
background-color: $button-warning-background-color;
border: 1px solid $button-warning-border-color;
}
&--plain {
background-color: $white;
@ -63,6 +70,10 @@
&.van-button--danger {
color: $button-danger-background-color;
}
&.van-button--warning {
color: $button-warning-background-color;
}
}
&--large {
@ -112,21 +123,6 @@
display: block;
}
&--bottom-action {
width: 100%;
height: 50px;
line-height: 50px;
border: 0;
border-radius: 0;
font-size: 16px;
color: $button-bottom-action-default-color;
background-color: $button-bottom-action-default-background-color;
&.van-button--primary {
background-color: $button-bottom-action-primary-background-color;
}
}
&--disabled {
color: $button-disabled-color;
background-color: $button-disabled-background-color;

5
packages/common/var.pcss
View File

@ -3,7 +3,7 @@ $black: #000;
$white: #fff;
$red: #f44;
$blue: #38f;
$orange: #f60;
$orange: #f85;
$green: #06bf04;
$gray: #c9c9c9;
$gray-light: #e5e5e5;
@ -26,6 +26,9 @@ $button-primary-border-color: #4b0;
$button-danger-color: $white;
$button-danger-background-color: $red;
$button-danger-border-color: $red;
$button-warning-color: $white;
$button-warning-background-color: $orange;
$button-warning-border-color: $orange;
$button-disabled-color: $gray-dark;
$button-disabled-background-color: $active-color;
$button-disabled-border-color: $border-color;