[new feature] Tabs: add title-active-color、title-inactive-color prop (youzan#2773)

Author: chenjiahan

packages/tab/en-US.md

@@ -151,12 +151,14 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | Attribute | Description | Type | Default |
 |------|------|------|------|
 | v-model | Index of active tab | `String` `Number` | `0` |
-| 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 |
+| color | Tab color | `String` | `#f44` |
+| title-active-color | Title active color | `String` | - |
+| title-inactive-color | Title inactive color | `String` | - |
 | swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |
 | sticky | Whether to use sticky mode | `Boolean` | `false` |
 | offset-top | Offset top when use sticky mode | `Number` | `0` |

packages/tab/zh-CN.md

@@ -155,12 +155,14 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | v-model | 当前标签的索引 | `String` `Number` | `0` | 1.0.6 |
-| 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 |
+| color | 标签主题色 | `String` | `#f44` | 1.2.0 |
+| title-active-color | 标题选中态颜色 | `String` | - | 1.6.5 |
+| title-inactive-color | 标题默认态颜色 | `String` | - | 1.6.5 |
 | swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |
 | sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
 | offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |

packages/tabs/index.js

@@ -21,6 +21,8 @@ export default sfc({
     offsetTop: Number,
     swipeable: Boolean,
     background: String,
+    titleActiveColor: String,
+    titleInactiveColor: String,
     ellipsis: {
       type: Boolean,
       default: true
@@ -362,6 +364,7 @@ export default sfc({
       const active = index === this.curActive;
       const isCard = this.type === 'card';
 
+      // theme color
       if (color) {
         if (!item.disabled && isCard && !active) {
           style.color = color;
@@ -374,6 +377,11 @@ export default sfc({
         }
       }
 
+      const titleColor = active ? this.titleActiveColor : this.titleInactiveColor;
+      if (titleColor) {
+        style.color = titleColor;
+      }
+
       if (this.scrollable && this.ellipsis) {
         style.flexBasis = 88 / this.swipeThreshold + '%';
       }