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] Tab: add line height prop (#2357)

Browse Source
This commit is contained in:
neverland 2018-12-22 08:56:29 +08:00 committed by GitHub
parent d77a240a49
commit dec920e36e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -155,6 +155,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
| type | Can be set to `line` `card` | `String` | `line` | | type | Can be set to `line` `card` | `String` | `line` |
| duration | Toggle tab's animation time | `Number` | `0.3` | - | | duration | Toggle tab's animation time | `Number` | `0.3` | - |
| line-width | Width of tab line (px) | `Number` | Width of active tab | | 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` | - | | swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |
| sticky | Whether to use sticky mode | `Boolean` | `false` | | sticky | Whether to use sticky mode | `Boolean` | `false` |
| offset-top | Offset top when use sticky mode | `Number` | `0` | | offset-top | Offset top when use sticky mode | `Number` | `0` |

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

@ -159,6 +159,7 @@ export default {
| type | 样式类型，可选值为`card` | `String` | `line` | - | | type | 样式类型，可选值为`card` | `String` | `line` | - |
| duration | 动画时间，单位秒 | `Number` | `0.3` | - | | duration | 动画时间，单位秒 | `Number` | `0.3` | - |
| line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 | | line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 |
| line-height | 底部条高度，单位 px | `Number` | 3 | 1.5.0 |
| swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 | | swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |
| sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - | | sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
| offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 | | offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |

4
packages/tabs/index.less
View File

@ -112,9 +112,9 @@
z-index: 1; z-index: 1;
left: 0; left: 0;
bottom: 15px; bottom: 15px;
height: 2px; height: 3px;
position: absolute; position: absolute;
border-radius: 2px; border-radius: 3px;
background-color: @red; background-color: @red;
} }

17
packages/tabs/index.vue
View File

@ -85,6 +85,10 @@ export default create({
type: Number, type: Number,
default: null default: null
}, },
lineHeight: {
type: Number,
default: null
},
active: { active: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
@ -298,15 +302,24 @@ export default create({
} }
const tab = tabs[this.curActive]; const tab = tabs[this.curActive];
const width = this.isDef(this.lineWidth) ? this.lineWidth : (tab.offsetWidth / 2); const { lineWidth, lineHeight } = this;
const width = this.isDef(lineWidth) ? lineWidth : (tab.offsetWidth / 2);
const left = tab.offsetLeft + (tab.offsetWidth - width) / 2; const left = tab.offsetLeft + (tab.offsetWidth - width) / 2;
this.lineStyle = { const lineStyle = {
width: `${width}px`, width: `${width}px`,
backgroundColor: this.color, backgroundColor: this.color,
transform: `translateX(${left}px)`, transform: `translateX(${left}px)`,
transitionDuration: `${this.duration}s` transitionDuration: `${this.duration}s`
}; };
if (this.isDef(lineHeight)) {
const height = `${lineHeight}px`;
lineStyle.height = height;
lineStyle.borderRadius = height;
}
this.lineStyle = lineStyle;
}); });
}, },