alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[improvement] Tab: support string type of line-width & line-height (#3514)

Browse Source
This commit is contained in:
neverland
2019-06-14 17:29:30 +08:00
committed by GitHub
parent c05124b3ec
commit 7fbf943a2d
11 changed files with 52 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/tab/en-US.md
+2 -2
View File
@@ -159,8 +159,8 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
| 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 |
| line-width | Width of tab line | `Number | String` | Width of active tab |
| line-height | Height of tab line | `Number | String` | `3px` |
| color | Tab color | `String` | `#f44` |
| title-active-color | Title active color | `String` | - |
| title-inactive-color | Title inactive color | `String` | - |
packages/tab/test/__snapshots__/demo.spec.js.snap
+8 -8
View File
@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-ellipsis">标签 1</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 2</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 3</span></div>
@@ -76,7 +76,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">标签 2</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
@@ -121,7 +121,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
</div>
@@ -140,7 +140,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
@@ -167,7 +167,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active">
<div>
<div><i class="van-icon van-icon-more-o">
@@ -198,7 +198,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
@@ -235,7 +235,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
packages/tab/test/__snapshots__/index.spec.js.snap
+3 -3
View File
@@ -62,7 +62,7 @@ exports[`click to switch tab 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
<div role="tab" class="van-tab">
<div><span>title2</span></div>
@@ -86,7 +86,7 @@ exports[`click to switch tab 2`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px); transition-duration: 0.3s;"></div>
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">title1</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true">
<div><span>title2</span></div>
@@ -133,7 +133,7 @@ exports[`lazy render 2`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
<div role="tab" class="van-tab">
<div><span>title2</span></div>
packages/tab/test/index.spec.js
+4 -4
View File
@@ -129,10 +129,10 @@ test('render nav-left & nav-right slot', async () => {
});
test('border props', async () => {
const wrapper = mount({
template: `
<van-tabs :border="false" />
`,
const wrapper = mount(Tabs, {
propsData: {
border: false
}
});
expect(wrapper).toMatchSnapshot();
packages/tab/zh-CN.md
+2 -2
View File
@@ -161,8 +161,8 @@ export default {
| 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 |
| line-width | 底部条宽度，默认单位 px | `Number | String` | `auto` | 1.1.1 |
| line-height | 底部条高度，默认单位 px | `Number | String` | `3px` | 1.5.0 |
| color | 标签主题色 | `String` | `#f44` | 1.2.0 |
| title-active-color | 标题选中态颜色 | `String` | - | 1.6.5 |
| title-inactive-color | 标题默认态颜色 | `String` | - | 1.6.5 |