Skip to content

Commit

Permalink
fix(tabs): 修复嵌套使用时的样式错乱问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@yang1206
yang1206 committed Dec 16, 2023
1 parent 88e242f commit a8c9822
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 140 deletions.
3 changes: 2 additions & 1 deletion .stylelintrc
View file
Expand Up @@ -32,7 +32,8 @@
{
"ignoreTypes": [
"page",
"rich-text"
"rich-text",
"scroll-view"
]
}
],
Expand Down
21 changes: 21 additions & 0 deletions example/src/pages/demo/nav/tabs/index.vue
View file
Expand Up @@ -219,6 +219,27 @@ export default {
{{ item.title }}
</nut-tab-pane>
</nut-tabs>
<nut-tabs v-model="state.tab11value" direction="vertical">
<nut-tab-pane title="Tab 1" pane-key="0">
<nut-tabs v-model="state.tab1value">
<nut-tab-pane title="Tab 1" pane-key="0.0">
Tab 1
</nut-tab-pane>
<nut-tab-pane title="Tab 2" pane-key="0.1">
Tab 2
</nut-tab-pane>
<nut-tab-pane title="Tab 3" pane-key="0.2">
Tab 3
</nut-tab-pane>
</nut-tabs>
</nut-tab-pane>
<nut-tab-pane title="Tab 2" pane-key="1">
Tab 2
</nut-tab-pane>
<nut-tab-pane title="Tab 3" pane-key="2">
Tab 3
</nut-tab-pane>
</nut-tabs>
</div>
</template>

Expand Down
267 changes: 131 additions & 136 deletions packages/nutui/components/tabs/index.scss
View file
Expand Up @@ -31,54 +31,142 @@
display: flex;
overflow: hidden;

.nut-tabs__titles {
display: flex;
flex-shrink: 0;
white-space: nowrap;
user-select: none;
background: $tabs-titles-background-color;
border-radius: $tabs-titles-border-radius;

.nut-tabs__list {
display: flex;
flex-shrink: 0;
width: 100%;
}

.nut-tabs__titles-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: $tabs-titles-item-font-size;
color: $tabs-titles-item-color;

&__text {
&.ellipsis {
@include oneline-ellipsis;
}

text-align: center;
}

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

&__smile,
&__line {
position: absolute;
bottom: 15%;
left: 50%;
width: 0;
height: 0;
overflow: hidden;
content: ' ';
border-radius: $tabs-titles-item-line-border-radius;
opacity: $tabs-titles-item-line-opacity;
transition: width 0.3s ease;
transform: translate(-50%, 0);
}

&.nut-tabs-active {
font-weight: bold;
color: $tabs-titles-item-active-color;

.nut-tabs__titles-item__line {
width: $tabs-horizontal-titles-item-active-line-width;
height: 3px;
content: ' ';
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: auto hidden;
}

.nut-tabs__titles-item {
flex: 1 0 auto;
width: 0;
min-width: $tabs-horizontal-titles-item-min-width;

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

&.vertical {
flex-direction: row;
width: 100%;

.nut-tabs__titles {
> .nut-tabs__titles {
flex-direction: column;
flex-shrink: 0;
width: $tabs-vertical-titles-width;
height: 100%;
padding: 10px 0 !important;
height: auto;
padding: 10px 0;

.nut-tabs__list {
display: flex;
.nut-tabs__list {
flex-direction: column;
flex-shrink: 0;
width: 100%;
}

&.scrollable {
overflow-x: hidden;
overflow-y: auto;

.nut-tabs__titles-item {
padding: 0 10px 0 15px;
}
}

&.scroll-vertical {
height: auto;
overflow-y: scroll;
// height: auto;
overflow: hidden auto;

.nut-tabs__titles-placeholder {
height: 22px;
}
}

&-item {
.nut-tabs__titles-item {
flex: none;
width: 100%;
min-width: $tabs-horizontal-titles-item-min-width;
height: $tabs-vertical-titles-item-height;

&__smile {
transition: width 0.3s ease;
}

&__line {
bottom: none;
width: 0;
Expand All @@ -98,10 +186,11 @@
}

.nut-tabs__titles-item__smile {
position: absolute;
right: -8px;
bottom: 2px;
left: auto;
width: 3px;
width: 36px;
height: $tabs-vertical-titles-item-active-line-height;
transform: rotate(320deg);
}
Expand All @@ -120,36 +209,16 @@
}

&__titles {
display: flex;
flex-shrink: 0;
height: $tabs-horizontal-titles-height;
user-select: none;
background: $tabs-titles-background-color;
border-radius: $tabs-titles-border-radius;

.nut-tabs__list {
display: flex;
flex-shrink: 0;
width: 100%;
height: $tabs-horizontal-titles-height;
}

&.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 {
Expand All @@ -168,98 +237,25 @@
}
}
}

&.scrollable {
overflow-x: auto;
overflow-y: hidden;

.nut-tabs__titles-item {
width: auto;
}
}

&-item {
position: relative;
display: flex;
flex: 1 0 auto;
align-items: center;
justify-content: center;
width: 0;
min-width: $tabs-horizontal-titles-item-min-width;
font-size: $tabs-titles-item-font-size;
color: $tabs-titles-item-color;

&.nut-tabs__titles-placeholder {
width: auto;
min-width: 10px;
}

.uni {
height: 46px;
line-height: 46px;
}

&__text {
&.ellipsis {
@include oneline-ellipsis;
}

text-align: center;
}

&__smile,
&__line {
position: absolute;
bottom: 15%;
left: 50%;
width: 0;
height: 0;
overflow: hidden;
content: ' ';
border-radius: $tabs-titles-item-line-border-radius;
opacity: $tabs-titles-item-line-opacity;
transition: width 0.3s ease;
transform: translate(-50%, 0);
}

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

&.disabled {
color: $disable-color;
}

&.nut-tabs-active {
font-weight: bold;
color: $tabs-titles-item-active-color;

.nut-tabs__titles-item__line {
width: $tabs-horizontal-titles-item-active-line-width;
height: 3px;
content: ' ';
background: $tabs-horizontal-tab-line-color;
}
}
}
}

&__content {
box-sizing: border-box;
display: flex;
}
}

.tabs-scrollview {
white-space: nowrap;
}
.nut-tabs__titles-item {
.uni {
height: 46px;
line-height: 46px;
}
}

.nut-tabs__titles-placeholder {
width: auto;
min-width: 10px;
}
}


scroll-view ::-webkit-scrollbar{
Expand All @@ -268,4 +264,3 @@ scroll-view ::-webkit-scrollbar{
height: 0 !important;
background: transparent;
}

6 changes: 3 additions & 3 deletions packages/nutui/components/tabs/tabs.vue
View file
Expand Up @@ -298,8 +298,8 @@ export default defineComponent({
: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 All @@ -321,7 +321,7 @@ export default defineComponent({
{{ item.title }}
</view>
</view>
<view v-if="canShowLabel" class="nut-tabs__titles-item nut-tabs__titles-placeholder" />
<view v-if="canShowLabel" class="nut-tabs__titles-placeholder" />
</template>
</view>
</scroll-view>
Expand Down

0 comments on commit a8c9822

Please sign in to comment.