[new feature] Tabbar: add inactive-color prop

docs/markdown/v2-progress-tracking.md

@@ -103,4 +103,7 @@
 
 - 新增`preview-open`事件
 - 新增`preview-close`事件
- 
+ 
+### Tabbar
+
+- 新增`inactive-color`属性

packages/tabbar-item/index.js

@@ -37,10 +37,10 @@ export default sfc({
 
   render(h) {
     const { icon, slots, active } = this;
-    const style = active ? { color: this.$parent.activeColor } : null;
+    const color = this.$parent[active ? 'activeColor' : 'inactiveColor'];
 
     return (
-      <div class={bem({ active })} style={style} onClick={this.onClick}>
+      <div class={bem({ active })} style={{ color }} onClick={this.onClick}>
         <div class={bem('icon', { dot: this.dot })}>
           {slots('icon', { active }) || (icon && <Icon name={icon} />)}
           <Info info={this.info} />

packages/tabbar/demo/index.vue

@@ -43,6 +43,7 @@
       <van-tabbar
         v-model="active3"
         active-color="#07c160"
+        inactive-color="#000"
       >
         <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
         <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>

packages/tabbar/en-US.md

@@ -63,6 +63,21 @@ export default {
 }
 ```
 
+#### Custom Color
+
+```html
+<van-tabbar
+  v-model="active"
+  active-color="#07c160"
+  inactive-color="#000"
+>
+  <van-tabbar-item icon="home-o">Tab</van-tabbar-item>
+  <van-tabbar-item icon="search">Tab</van-tabbar-item>
+  <van-tabbar-item icon="freinds-o">Tab</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
+</van-tabbar>
+```
+
 ### Tabbar Props
 
 | Attribute | Description | Type | Default |
@@ -71,6 +86,7 @@ export default {
 | fixed | Whether to fixed bottom | `Boolean` | `true` |
 | z-index | Z-index | `Number` | `1` |
 | active-color | Color of active tab item | `String` | `#1989fa` |
+| inactive-color | Color of inactive tab item | `String` | `#7d7e80` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
 
 ### Tabbar Events

packages/tabbar/index.js

@@ -12,6 +12,7 @@ export default sfc({
   props: {
     value: Number,
     activeColor: String,
+    inactiveColor: String,
     safeAreaInsetBottom: Boolean,
     fixed: {
       type: Boolean,

packages/tabbar/test/__snapshots__/demo.spec.js.snap

@@ -66,28 +66,28 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
-      <div class="van-tabbar-item">
+      <div class="van-tabbar-item" style="color:#000;">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
           <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
-      <div class="van-tabbar-item">
+      <div class="van-tabbar-item" style="color:#000;">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
             <!----></i>
           <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
-      <div class="van-tabbar-item">
+      <div class="van-tabbar-item" style="color:#000;">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
             <!----></i>
           <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
-      <div class="van-tabbar-item">
+      <div class="van-tabbar-item" style="color:#000;">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
             <!----></i>
           <!---->

packages/tabbar/zh-CN.md

@@ -70,6 +70,7 @@ export default {
 <van-tabbar
   v-model="active"
   active-color="#07c160"
+  inactive-color="#000"
 >
   <van-tabbar-item icon="home-o">标签</van-tabbar-item>
   <van-tabbar-item icon="search">标签</van-tabbar-item>
@@ -86,6 +87,7 @@ export default {
 | fixed | 是否固定在底部 | `Boolean` | `true` | - |
 | z-index | 元素 z-index | `Number` | `1` | 1.1.9 |
 | active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 |
+| inactive-color | 未选中标签的颜色 | `String` | `#7d7e80` | 2.0.0 |
 | safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
 
 ### Tabbar Events