blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland 2019-02-17 20:47:04 +08:00 committed by GitHub
parent cb4127949f
commit 5591d44bda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/tab/en-US.md
View File

@ -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` |

4
packages/tab/zh-CN.md
View File

@ -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 |

8
packages/tabs/index.js
View File

@ -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 + '%';
}