diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md index 6ea832a49..87a0375bf 100644 --- a/docs/markdown/v2-progress-tracking.md +++ b/docs/markdown/v2-progress-tracking.md @@ -103,4 +103,7 @@ - 新增`preview-open`事件 - 新增`preview-close`事件 - \ No newline at end of file + +### Tabbar + +- 新增`inactive-color`属性 diff --git a/packages/tabbar-item/index.js b/packages/tabbar-item/index.js index dd86f78be..f5343576b 100644 --- a/packages/tabbar-item/index.js +++ b/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 ( -
+
{slots('icon', { active }) || (icon && )} diff --git a/packages/tabbar/demo/index.vue b/packages/tabbar/demo/index.vue index eba77a9d1..7c0552fd4 100644 --- a/packages/tabbar/demo/index.vue +++ b/packages/tabbar/demo/index.vue @@ -43,6 +43,7 @@ {{ $t('tab') }} {{ $t('tab') }} diff --git a/packages/tabbar/en-US.md b/packages/tabbar/en-US.md index 6b0f745ec..d25968528 100644 --- a/packages/tabbar/en-US.md +++ b/packages/tabbar/en-US.md @@ -63,6 +63,21 @@ export default { } ``` +#### Custom Color + +```html + + Tab + Tab + Tab + Tab + +``` + ### 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 diff --git a/packages/tabbar/index.js b/packages/tabbar/index.js index 3ea06934d..534bd3d33 100644 --- a/packages/tabbar/index.js +++ b/packages/tabbar/index.js @@ -12,6 +12,7 @@ export default sfc({ props: { value: Number, activeColor: String, + inactiveColor: String, safeAreaInsetBottom: Boolean, fixed: { type: Boolean, diff --git a/packages/tabbar/test/__snapshots__/demo.spec.js.snap b/packages/tabbar/test/__snapshots__/demo.spec.js.snap index 7f5319376..b933c13f1 100644 --- a/packages/tabbar/test/__snapshots__/demo.spec.js.snap +++ b/packages/tabbar/test/__snapshots__/demo.spec.js.snap @@ -66,28 +66,28 @@ exports[`renders demo correctly 1`] = `
-
+
标签
-
+
标签
-
+
标签
-
+
diff --git a/packages/tabbar/zh-CN.md b/packages/tabbar/zh-CN.md index 09d4ed21d..7bbb3e7c9 100644 --- a/packages/tabbar/zh-CN.md +++ b/packages/tabbar/zh-CN.md @@ -70,6 +70,7 @@ export default { 标签 标签 @@ -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