Skip to content

Commit

Permalink
fix(tabs): 修复嵌套使用时的样式错乱问题 (#2728)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Dec 11, 2023
1 parent aad077c commit ab4bd7e
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 116 deletions.
229 changes: 116 additions & 113 deletions src/packages/__VUE/tabs/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,38 +25,123 @@
.nut-tabs {
display: flex;
overflow: hidden;
.nut-tabs__titles {
display: flex;
user-select: none;
white-space: nowrap;
flex-shrink: 0;
background: $tabs-titles-background-color;
border-radius: $tabs-titles-border-radius;
.nut-tabs__list {
width: 100%;
display: flex;
flex-shrink: 0;
}
.nut-tabs__titles-item {
position: relative;
font-size: $tabs-titles-item-font-size;
display: flex;
align-items: center;
justify-content: center;
color: $tabs-titles-item-color;
&__text {
&.ellipsis {
@include oneline-ellipsis();
}
text-align: center;
}
&__smile {
.nut-icon {
position: absolute;
font-size: 12px;
width: 100%;
height: 100%;
color: $tabs-tab-smile-color;
}
}
&__smile,
&__line {
position: absolute;
transition: width 0.3s ease;
width: 0;
height: 0;
content: ' ';
bottom: 15%;
left: 50%;
transform: translate(-50%, 0);
overflow: hidden;
border-radius: $tabs-titles-item-line-border-radius;
opacity: $tabs-titles-item-line-opacity;
}
&.active {
font-weight: bold;
color: $tabs-titles-item-active-color;
.nut-tabs__titles-item__line {
content: ' ';
width: $tabs-horizontal-titles-item-active-line-width;
height: 3px;
background: $tabs-horizontal-tab-line-color;
}
}
&.disabled {
color: $disable-color;
}
}
}
&.horizontal {
flex-direction: column;
.nut-sticky__box > .nut-tabs__titles,
> .nut-tabs__titles {
flex-direction: row;
height: $tabs-horizontal-titles-height;
.nut-tabs__list {
height: 100%;
}
&.scrollable {
overflow-x: auto;
overflow-y: hidden;
}
.nut-tabs__titles-item {
flex: 1 0 auto;
min-width: $tabs-horizontal-titles-item-min-width;
width: 0;

&__smile {
.nut-icon {
position: absolute;
font-size: 12px;
width: 100%;
height: 100%;
color: $tabs-tab-smile-color;
}
}
}
}
}
&.vertical {
flex-direction: row;
width: 100%;
.nut-tabs__titles {
> .nut-tabs__titles {
flex-direction: column;
height: 100%;
padding: 10px 0 !important;
height: auto;
padding: 10px 0;
width: $tabs-vertical-titles-width;
flex-shrink: 0;
.nut-tabs__list {
width: 100%;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
&.scroll-vertical {
overflow-y: scroll;
&.scrollable {
overflow-x: hidden;
overflow-y: auto;
height: auto;
.nut-tabs__titles-placeholder {
height: 22px;
}
}
&-item {
.nut-tabs__titles-item {
min-width: $tabs-horizontal-titles-item-min-width;
width: 100%;
height: $tabs-vertical-titles-item-height;
flex: none;
&__smile {
transition: width 0.3s ease;
}
&__line {
bottom: none;
transform: translate(0, -50%);
Expand All @@ -66,18 +151,18 @@
}
&.active {
background-color: #fff;

.nut-tabs__titles-item__line {
left: 10px;
width: 3px;
background: $tabs-vertical-tab-line-color;
height: $tabs-vertical-titles-item-active-line-height;
}
.nut-tabs__titles-item__smile {
position: absolute;
right: -8px;
bottom: 2px;
left: auto;
width: 3px;
width: 36px;
transform: rotate(320deg);
height: $tabs-vertical-titles-item-active-line-height;
}
Expand All @@ -94,33 +179,14 @@
}

&__titles {
height: $tabs-horizontal-titles-height;
// padding: 0 10px;
display: flex;
user-select: none;
background: $tabs-titles-background-color;
border-radius: $tabs-titles-border-radius;
flex-shrink: 0;
.nut-tabs__list {
width: 100%;
height: $tabs-horizontal-titles-height;
display: flex;
flex-shrink: 0;
}
&.large {
.nut-tabs__titles-item {
font-size: $tabs-titles-item-large-font-size;
}
&.large .nut-tabs__titles-item {
font-size: $tabs-titles-item-large-font-size;
}
&.normal {
.nut-tabs__titles-item {
font-size: $tabs-titles-item-font-size;
}
&.normal .nut-tabs__titles-item {
font-size: $tabs-titles-item-font-size;
}
&.small {
.nut-tabs__titles-item {
font-size: $tabs-titles-item-small-font-size;
}
&.small .nut-tabs__titles-item {
font-size: $tabs-titles-item-small-font-size;
}
&::-webkit-scrollbar {
display: none;
Expand All @@ -138,84 +204,21 @@
}
}
}
&.scrollable {
overflow-x: auto;
overflow-y: hidden;
.nut-tabs__titles-item {
width: auto;
}
}
&-item {
position: relative;
font-size: $tabs-titles-item-font-size;
flex: 1 0 auto;
min-width: $tabs-horizontal-titles-item-min-width;
width: 0;
display: flex;
align-items: center;
justify-content: center;
color: $tabs-titles-item-color;
&__text {
&.ellipsis {
@include oneline-ellipsis();
}
text-align: center;
}
&__smile,
&__line {
position: absolute;
transition: width 0.3s ease;
width: 0;
height: 0;
content: ' ';
bottom: 15%;
left: 50%;
transform: translate(-50%, 0);
overflow: hidden;
border-radius: $tabs-titles-item-line-border-radius;
opacity: $tabs-titles-item-line-opacity;
}

&__smile {
.nut-icon {
position: absolute;
font-size: 12px;
width: 100%;
height: 100%;
color: $tabs-tab-smile-color;
}
}

&.disabled {
color: $disable-color;
}
&.active {
font-weight: bold;
color: $tabs-titles-item-active-color;
.nut-tabs__titles-item__line {
content: ' ';
width: $tabs-horizontal-titles-item-active-line-width;
height: 3px;
background: $tabs-horizontal-tab-line-color;
}
}
}
}
&__content {
display: flex;
box-sizing: border-box;
}
}
.tabs-scrollview {
white-space: nowrap;
}
.nut-tabs__titles-item {
&.nut-tabs__titles-placeholder {
width: auto;
min-width: 10px;
}
.taro {
height: 46px;
line-height: 46px;
.nut-tabs {
.nut-tabs__titles-item {
&.nut-tabs__titles-placeholder {
width: auto;
min-width: 10px;
}
.taro {
height: 46px;
line-height: 46px;
}
}
}
4 changes: 2 additions & 2 deletions src/packages/__VUE/tabs/index.taro.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
:scroll-left="scrollLeft"
:scroll-top="scrollTop"
:enable-flex="true"
class="nut-tabs__titles tabs-scrollview"
:class="{ [type]: type, scrollable: titleScroll, 'scroll-vertical': getScrollY, [size]: size }"
class="nut-tabs__titles"
:class="{ [type]: type, scrollable: titleScroll, [size]: size }"
:style="tabsNavStyle"
>
<view class="nut-tabs__list">
Expand Down
2 changes: 1 addition & 1 deletion src/packages/__VUE/tabs/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<view
ref="navRef"
class="nut-tabs__titles"
:class="{ [type]: type, scrollable: titleScroll, 'scroll-vertical': getScrollY, [size]: size }"
:class="{ [type]: type, scrollable: titleScroll, [size]: size }"
:style="tabsNavStyle"
>
<slot v-if="$slots.titles" name="titles"></slot>
Expand Down

0 comments on commit ab4bd7e

Please sign in to comment.