[new feature] Tabs: add background prop (#2772)

packages/tab/en-US.md

@@ -154,6 +154,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | color | Tab color | `String` | `#f44` |
 | type | Can be set to `line` `card` | `String` | `line` |
 | duration | Toggle tab's animation time | `Number` | `0.3` | - |
+| background | Background color | `String` | `white` |
 | line-width | Width of tab line (px) | `Number` | Width of active tab |
 | line-height | Height of tab line (px) | `Number` | 3 |
 | swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |

packages/tab/zh-CN.md

@@ -158,6 +158,7 @@ export default {
 | color | 标签颜色 | `String` | `#f44` | 1.2.0 |
 | type | 样式类型，可选值为`card` | `String` | `line` | - |
 | duration | 动画时间，单位秒 | `Number` | `0.3` | - |
+| background | 标签栏背景色 | `String` | `white` | 1.6.5 |
 | line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 |
 | line-height | 底部条高度，单位 px | `Number` | 3 | 1.5.0 |
 | swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |

packages/tabs/index.js

@@ -20,6 +20,7 @@ export default sfc({
     animated: Boolean,
     offsetTop: Number,
     swipeable: Boolean,
+    background: String,
     ellipsis: {
       type: Boolean,
       default: true
@@ -91,7 +92,8 @@ export default sfc({
 
     navStyle() {
       return {
-        borderColor: this.color
+        borderColor: this.color,
+        background: this.background
       };
     },
 

packages/tabs/index.less

@@ -11,7 +11,6 @@
   line-height: @tabs-line-height;
   text-align: center;
   box-sizing: border-box;
-  background-color: @white;
 
   span {
     display: block;