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

style(Tabs): adjust default line-width to 40px (#7002)

Browse Source
This commit is contained in:
neverland 2020-08-13 20:50:53 +08:00 committed by GitHub
parent 3c44b5acd9
commit 4f9eeec752
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 27 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/empty/test/__snapshots__/demo.spec.js.snap
View File

@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">通用错误</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">网络错误</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">搜索提示</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">

2
src/index-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义索引列表</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">

2
src/list/test/__snapshots__/demo.spec.js.snap
View File

@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">错误提示</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">下拉刷新</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">

2
src/pull-refresh/test/__snapshots__/demo.spec.js.snap
View File

@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">成功提示</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义提示</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">

1
src/style/var.less
View File

@ -770,6 +770,7 @@
@tabs-line-height: 44px;
@tabs-card-height: 30px;
@tabs-nav-background-color: @white;
@tabs-bottom-bar-width: 40px;
@tabs-bottom-bar-height: 3px;
@tabs-bottom-bar-color: @tabs-default-color;

2
src/tab/README.md
View File

@ -224,7 +224,7 @@ export default {
| color | Tab color | _string_ | `#ee0a24` |
| background | Background color | _string_ | `white` |
| duration | Toggle tab's animation time | _number \| string_ | `0.3` | - |
| line-width | Width of tab line | _number \| string_ | Width of active tab |
| line-width | Width of tab line | _number \| string_ | `40px` |
| line-height | Height of tab line | _number \| string_ | `3px` |
| animated | Whether to change tabs with animation | _boolean_ | `false` |
| border | Whether to show border when `type="line"` | _boolean_ | `false` |

4
src/tab/README.zh-CN.md
View File

@ -231,8 +231,8 @@ export default {
| color | 标签主题色 | _string_ | `#ee0a24` |
| background | 标签栏背景色 | _string_ | `white` |
| duration | 动画时间，单位秒 | _number \| string_ | `0.3` |
| line-width | 底部条宽度，默认单位`px` | _number \| string_ | `auto` |
| line-height | 底部条高度，默认单位`px` | _number \| string_ | `3px` |
| line-width | 底部条宽度，默认单位 `px` | _number \| string_ | `40px` |
| line-height | 底部条高度，默认单位 `px` | _number \| string_ | `3px` |
| animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` |
| border | 是否显示标签栏外边框，仅在 `type="line"` 时有效 | _boolean_ | `false` |
| ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` |

22
src/tab/test/__snapshots__/demo.spec.js.snap
View File

@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -36,7 +36,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -62,7 +62,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -100,7 +100,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -144,7 +144,7 @@ exports[`renders demo correctly 1`] = `
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -167,7 +167,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
</div>
@ -194,7 +194,7 @@ exports[`renders demo correctly 1`] = `
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签 </span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签 </span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -215,7 +215,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
@ -252,7 +252,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -285,7 +285,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
</div>
@ -326,7 +326,7 @@ exports[`renders demo correctly 1`] = `
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">

10
src/tab/test/__snapshots__/index.spec.js.snap
View File

@ -65,7 +65,7 @@ exports[`click to switch tab 1`] = `
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -87,7 +87,7 @@ exports[`click to switch tab 2`] = `
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
</div>
</div>
<div class="van-tabs__content">
@ -187,7 +187,7 @@ exports[`name prop 1`] = `
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
@ -238,7 +238,7 @@ exports[`scrollspy prop 1`] = `
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
</div>
@ -260,7 +260,7 @@ exports[`scrollspy prop 2`] = `
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
</div>
</div>
</div>

2
src/tab/test/__snapshots__/insert.spec.js.snap
View File

@ -7,7 +7,7 @@ exports[`insert tab dynamically 1`] = `
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">3</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">

3
src/tabs/index.js
View File

@ -204,11 +204,10 @@ export default createComponent({
const title = titles[this.currentIndex].$el;
const { lineWidth, lineHeight } = this;
const width = isDef(lineWidth) ? lineWidth : title.offsetWidth / 2;
const left = title.offsetLeft + title.offsetWidth / 2;
const lineStyle = {
width: addUnit(width),
width: addUnit(lineWidth),
backgroundColor: this.color,
transform: `translateX(${left}px) translateX(-50%)`,
};

1
src/tabs/index.less
View File

@ -119,6 +119,7 @@
bottom: 15px;
left: 0;
z-index: 1;
width: @tabs-bottom-bar-width;
height: @tabs-bottom-bar-height;
background-color: @tabs-bottom-bar-color;
border-radius: @tabs-bottom-bar-height;