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

youzan · Feb 24, 2019 · 082fcbb · 082fcbb
1 parent ca636d3
commit 082fcbb
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/example/pages/button/index.wxml b/example/pages/button/index.wxml
@@ -1,10 +1,11 @@
 <demo-section>
   <demo-block title="按钮类型" padding>
     <view class="row">
+      <van-button 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>
-    <van-button class="demo-margin-right">默认按钮</van-button>
+    <van-button type="danger" class="demo-margin-right">危险按钮</van-button>
     <van-button type="warning">警告按钮</van-button>
   </demo-block>
 

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

diff --git a/packages/button/index.less b/packages/button/index.less
@@ -49,6 +49,12 @@
     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 {
     color: @button-danger-color;
     background-color: @button-danger-background-color;
@@ -68,6 +74,10 @@
       color: @button-primary-background-color;
     }
 
+    &.van-button--info {
+      color: @button-info-background-color;
+    }
+
     &.van-button--danger {
       color: @button-danger-background-color;
     }

diff --git a/packages/common/style/var.less b/packages/common/style/var.less
@@ -26,6 +26,9 @@
 @button-primary-color: @white;
 @button-primary-background-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-background-color: @red;
 @button-danger-border-color: @red;