Skip to content

Commit

Permalink
style(Tab): disable ellipsis when scrollable
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenjiahan
chenjiahan committed Jul 31, 2020
1 parent 729cca6 commit bc0e456
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 25 deletions.
2 changes: 1 addition & 1 deletion src/tab/demo/index.vue
View file
Expand Up @@ -182,7 +182,7 @@ export default {
}
.van-tab__pane {
padding: 25px 20px;
padding: 24px 20px;
background-color: @white;
}
Expand Down
36 changes: 18 additions & 18 deletions src/tab/test/__snapshots__/demo.spec.js.snap
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions src/tabs/Title.js
View file
Expand Up @@ -11,7 +11,6 @@ export default createComponent({
color: String,
title: String,
isActive: Boolean,
ellipsis: Boolean,
disabled: Boolean,
scrollable: Boolean,
activeColor: String,
Expand Down Expand Up @@ -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>
);
Expand All @@ -85,7 +84,7 @@ export default createComponent({
bem({
active: this.isActive,
disabled: this.disabled,
complete: !this.ellipsis,
complete: this.scrollable,
}),
]}
style={this.style}
Expand Down
5 changes: 2 additions & 3 deletions src/tabs/index.js
View file
Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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')}
Expand Down

0 comments on commit bc0e456

Please sign in to comment.