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(Tab): improve text size adjust, fix ellipsis issue (#6209)

Browse Source
This commit is contained in:
neverland 2020-05-04 16:42:47 +08:00 committed by GitHub
parent aa125ac06b
commit 06b0c59d2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 148 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/coupon-list/test/__snapshots__/index.spec.js.snap
View File

@ -12,8 +12,8 @@ exports[`empty-image prop 1`] = `
<div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">可用 (0)<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">不可用 (0)<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
<div class="van-tabs__line"></div>
</div>
</div>
@ -62,8 +62,8 @@ exports[`render coupon list 1`] = `
<div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">可用 (6)<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">不可用 (2)<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (6)</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"></div>
</div>
</div>
@ -208,8 +208,8 @@ exports[`render empty coupon list 1`] = `
<div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">可用 (0)<!----></span></div>
<div role="tab" class="van-tab van-tab--active van-ellipsis" aria-selected="true"><span class="van-tab__text">不可用 (0)<!----></span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
<div class="van-tabs__line"></div>
</div>
</div>

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

@ -12,9 +12,9 @@ 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">通用错误<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">网络错误<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">搜索提示<!----></span></div>
<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>
</div>

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

@ -5,8 +5,8 @@ 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" style="border-color: #1989fa;">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">基础用法<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">自定义索引列表<!----></span></div>
<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="background-color: rgb(25, 137, 250); width: 0px; transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>

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

@ -5,9 +5,9 @@ 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">基础用法<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">错误提示<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">下拉刷新<!----></span></div>
<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>
</div>

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

@ -5,9 +5,9 @@ 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">基础用法<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">成功提示<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">自定义提示<!----></span></div>
<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>
</div>

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

@ -6,10 +6,10 @@ 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 role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 4<!----></span></div>
<div role="tab" class="van-tab"><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 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>
</div>
@ -33,9 +33,9 @@ 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 role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
<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>
</div>
@ -54,14 +54,14 @@ 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 3<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 4<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 5<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 6<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 7<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 8<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
@ -97,9 +97,9 @@ 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
<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>
</div>
@ -120,9 +120,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs van-tabs--card">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--card">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
<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 role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
</div>
</div>
<div class="van-tabs__content">
@ -142,8 +142,8 @@ 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
<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>
</div>
@ -163,10 +163,10 @@ exports[`renders demo correctly 1`] = `
<div class="van-sticky">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 4<!----></span></div>
<div role="tab" class="van-tab"><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 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>
</div>
@ -192,8 +192,8 @@ 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text"><i class="van-icon van-icon-more-o"><!----></i>标签 <!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text"><i class="van-icon van-icon-more-o"><!----></i>标签 <!----></span></div>
<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>
</div>
@ -211,10 +211,10 @@ 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 4<!----></span></div>
<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 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>
</div>
@ -248,10 +248,10 @@ 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 role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 4<!----></span></div>
<div role="tab" class="van-tab"><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 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>
</div>
@ -277,14 +277,14 @@ exports[`renders demo correctly 1`] = `
<div class="van-sticky">
<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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 3<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 4<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 5<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 6<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 7<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 8<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</span></div>
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>

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

@ -17,9 +17,9 @@ exports[`change tabs data 1`] = `
<div class="van-sticky">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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="background-color: rgb(238, 10, 36);"></div>
</div>
</div>
@ -41,9 +41,9 @@ exports[`change tabs data 2`] = `
<div class="van-tabs van-tabs--card">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--card" style="border-color: blue;">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis" style="border-color: blue; background-color: blue;"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis" style="border-color: blue; color: blue;"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis" style="border-color: blue;"><span class="van-tab__text">title3<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active" style="border-color: blue; background-color: blue;"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab" style="border-color: blue; color: blue;"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled" style="border-color: blue;"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
</div>
</div>
<div class="van-tabs__content">
@ -62,9 +62,9 @@ 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">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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>
</div>
@ -84,9 +84,9 @@ 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">
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-tab--active van-ellipsis" aria-selected="true"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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>
</div>
@ -104,7 +104,9 @@ exports[`dot prop 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text"><div class="van-info van-info--dot"></div></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
<div class="van-info van-info--dot"></div>
</span></div>
<div class="van-tabs__line"></div>
</div>
</div>
@ -118,7 +120,9 @@ exports[`info prop 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text"><div class="van-info">10</div></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
<div class="van-info">10</div>
</span></div>
<div class="van-tabs__line"></div>
</div>
</div>
@ -134,9 +138,9 @@ exports[`lazy render 1`] = `
<div class="van-sticky">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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="background-color: rgb(238, 10, 36);"></div>
</div>
</div>
@ -160,9 +164,9 @@ exports[`lazy render 2`] = `
<div class="van-sticky">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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="background-color: rgb(238, 10, 36); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
@ -180,9 +184,9 @@ exports[`name prop 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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>
</div>
@ -203,9 +207,9 @@ exports[`render nav-left & nav-right slot 1`] = `
<div>
<div class="van-sticky">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">Nav Left<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">Nav Left<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="background-color: rgb(238, 10, 36);"></div>Nav Right
</div>
</div>
@ -231,9 +235,9 @@ exports[`scrollspy 1`] = `
<div class="van-sticky">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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>
</div>
@ -253,9 +257,9 @@ exports[`scrollspy 2`] = `
<div class="van-sticky">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--active van-ellipsis" aria-selected="true"><span class="van-tab__text">title3<!----></span></div>
<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>
</div>
@ -273,9 +277,9 @@ exports[`swipe 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">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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"></div>
</div>
</div>
@ -295,9 +299,9 @@ exports[`swipe 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">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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"></div>
</div>
</div>
@ -315,9 +319,9 @@ exports[`swipe to switch tab 3`] = `
<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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
<div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
<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"></div>
</div>
</div>

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

@ -4,9 +4,9 @@ exports[`insert tab dynamically 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 role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">1<!----></span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">3<!----></span></div>
<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>
</div>
@ -26,9 +26,9 @@ exports[`insert tab with child component 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 role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">3<!----></span></div>
<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 role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">3</span></div>
<div class="van-tabs__line"></div>
</div>
</div>

29
src/tabs/Title.js
View File

@ -1,4 +1,4 @@
import { createNamespace } from '../utils';
import { createNamespace, isDef } from '../utils';
import Info from '../info';
const [createComponent, bem] = createNamespace('tab');
@ -55,6 +55,25 @@ export default createComponent({
onClick() {
this.$emit('click');
},
genText() {
const Text = (
<span class={bem('text', { ellipsis: this.ellipsis })}>
{this.slots() || this.title}
</span>
);
if (this.dot || (isDef(this.info) && this.info !== '')) {
return (
<span class={bem('text-wrapper')}>
{Text}
{<Info dot={this.dot} info={this.info} />}
</span>
);
}
return Text;
},
},
render() {
@ -68,17 +87,11 @@ export default createComponent({
disabled: this.disabled,
complete: !this.ellipsis,
}),
{
'van-ellipsis': this.ellipsis,
},
]}
style={this.style}
onClick={this.onClick}
>
<span class={bem('text')}>
{this.slots() || this.title}
<Info dot={this.dot} info={this.info} />
</span>
{this.genText()}
</div>
);
},

20
src/tabs/index.less
View File

@ -2,14 +2,14 @@
.van-tab {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
box-sizing: border-box;
min-width: 0; // hack for flex ellipsis
padding: 0 5px;
padding: 0 @padding-base;
color: @tab-text-color;
font-size: @tab-font-size;
line-height: @tabs-line-height;
text-align: center;
cursor: pointer;
&--active {
@ -23,6 +23,15 @@
}
&__text {
&--ellipsis {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
&__text-wrapper {
position: relative;
}
}
@ -52,8 +61,8 @@
}
.van-tabs__nav {
overflow: hidden;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
@ -84,7 +93,6 @@
.van-tab {
color: @tabs-default-color;
line-height: @tabs-card-height - 2px;
border-right: @border-width-base solid @tabs-default-color;
&:last-child {