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): disable ellipsis when scrollable

Browse Source
This commit is contained in:
chenjiahan 2020-07-31 20:48:10 +08:00
parent 729cca61a9
commit bc0e45687a
4 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/tab/demo/index.vue
View File

@ -182,7 +182,7 @@ export default {
}
.van-tab__pane {
padding: 25px 20px;
padding: 24px 20px;
background-color: @white;
}

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

@ -53,15 +53,15 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-tabs__wrap--scrollable">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</span></div>
<div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-tab--complete"><span class="van-tab__text">标签 1</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 2</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 3</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 4</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 5</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 6</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 7</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 8</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
@ -276,15 +276,15 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-sticky">
<div class="van-tabs__wrap van-tabs__wrap--scrollable">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</span></div>
<div role="tab" class="van-tab" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</span></div>
<div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-tab--complete"><span class="van-tab__text">标签 1</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 2</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 3</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 4</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 5</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 6</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 7</span></div>
<div role="tab" class="van-tab van-tab--complete"><span class="van-tab__text">标签 8</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>

5
src/tabs/Title.js
View File

@ -11,7 +11,6 @@ export default createComponent({
color: String,
title: String,
isActive: Boolean,
ellipsis: Boolean,
disabled: Boolean,
scrollable: Boolean,
activeColor: String,
@ -58,7 +57,7 @@ export default createComponent({
genText() {
const Text = (
<span class={bem('text', { ellipsis: this.ellipsis })}>
<span class={bem('text', { ellipsis: !this.scrollable })}>
{this.slots() || this.title}
</span>
);
@ -85,7 +84,7 @@ export default createComponent({
bem({
active: this.isActive,
disabled: this.disabled,
complete: !this.ellipsis,
complete: this.scrollable,
}),
]}
style={this.style}

5
src/tabs/index.js
View File

@ -364,7 +364,7 @@ export default createComponent({
},
render() {
const { type, ellipsis, animated, scrollable } = this;
const { type, animated, scrollable } = this;
const Nav = this.children.map((item, index) => (
<Title
@ -377,7 +377,6 @@ export default createComponent({
color={this.color}
style={item.titleStyle}
isActive={index === this.currentIndex}
ellipsis={ellipsis}
disabled={item.disabled}
scrollable={scrollable}
activeColor={this.titleActiveColor}
@ -403,7 +402,7 @@ export default createComponent({
<div
ref="nav"
role="tablist"
class={bem('nav', [type, { complete: !ellipsis }])}
class={bem('nav', [type, { complete: this.scrollable }])}
style={this.navStyle}
>
{this.slots('nav-left')}