blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-08 05:29:45 +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 { .van-tab__pane {
padding: 25px 20px; padding: 24px 20px;
background-color: @white; 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>
<div class="van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-tabs__wrap--scrollable"> <div class="van-tabs__wrap van-tabs__wrap--scrollable">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line"> <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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div> <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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</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 class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
</div> </div>
</div> </div>
@ -276,15 +276,15 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-sticky"> <div class="van-sticky">
<div class="van-tabs__wrap van-tabs__wrap--scrollable"> <div class="van-tabs__wrap van-tabs__wrap--scrollable">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line"> <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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div> <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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</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" style="flex-basis: 17.6%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</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 class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
</div> </div>
</div> </div>

5
src/tabs/Title.js
View File

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

5
src/tabs/index.js
View File

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