Skip to content

Commit feeed7a

Browse files
LeeJimLeeJim
authored
Merge pull request #869 from Tencent/fix/tabs/nest
fix(tabs): using correct style when nest
2 parents 7380190 + 249eace commit feeed7a

File tree

3 files changed

+77
-78
lines changed

3 files changed

+77
-78
lines changed

‎src/tabs/__test__/__snapshots__/index.test.js.snap

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,26 @@ exports[`tabs :base 1`] = `
1111
container=""
1212
disabled="{{false}}"
1313
offsetTop=""
14-
tClass="t-tabs__sticky"
14+
tClass="t-tabs__sticky t-tabs__sticky--left"
1515
zIndex="{{2}}"
1616
bind:scroll="onTouchScroll"
1717
>
1818
<wx-view
1919
class="t-tabs__wrapper"
2020
>
2121
<wx-scroll-view
22-
class="t-tabs__scroll"
22+
class="t-tabs__scroll t-tabs__scroll--left"
2323
enableFlex="{{true}}"
2424
scrollLeft="{{0}}"
2525
scrollWithAnimation="{{true}}"
2626
scrollX="{{false}}"
2727
scrollY="{{true}}"
2828
>
2929
<wx-view
30-
class="t-tabs__nav"
30+
class="t-tabs__nav t-tabs__nav--left"
3131
>
3232
<wx-view
33-
class="t-tabs__item t-class-item t-is-active t-class-active"
33+
class="t-tabs__item t-tabs__item--left t-class-item t-is-active t-class-active"
3434
data-index="{{0}}"
3535
bind:tap="onTabTap"
3636
>
@@ -39,7 +39,7 @@ exports[`tabs :base 1`] = `
3939
4040
</wx-view>
4141
<wx-view
42-
class="t-tabs__item t-class-item "
42+
class="t-tabs__item t-tabs__item--left t-class-item "
4343
data-index="{{1}}"
4444
bind:tap="onTabTap"
4545
>
@@ -48,7 +48,7 @@ exports[`tabs :base 1`] = `
4848
4949
</wx-view>
5050
<wx-view
51-
class="t-tabs__item t-class-item "
51+
class="t-tabs__item t-tabs__item--left t-class-item "
5252
data-index="{{2}}"
5353
bind:tap="onTabTap"
5454
>
@@ -57,7 +57,7 @@ exports[`tabs :base 1`] = `
5757
5858
</wx-view>
5959
<wx-view
60-
class="t-tabs__item t-class-item "
60+
class="t-tabs__item t-tabs__item--left t-class-item "
6161
data-index="{{3}}"
6262
bind:tap="onTabTap"
6363
>
@@ -66,7 +66,7 @@ exports[`tabs :base 1`] = `
6666
6767
</wx-view>
6868
<wx-view
69-
class="t-tabs__track t-class-track"
69+
class="t-tabs__track t-tabs__track--left t-class-track"
7070
style="-webkit-transform: translateX(-15px);
7171
transform: translateX(-15px);
7272
width: 30px;"

‎src/tabs/tabs.less

Lines changed: 61 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,27 @@ page {
4949
flex: 1;
5050
font-weight: 400;
5151
color: var(--td-tab-item-color, @tab-item-color);
52+
53+
&--top,
54+
&--bottom {
55+
height: @tab-item-height--horizontal;
56+
line-height: @tab-item-height--horizontal;
57+
text-align: center;
58+
min-width: 162rpx;
59+
}
60+
61+
&--left,
62+
&--right {
63+
text-align: center;
64+
height: @tab-item-height--vertical;
65+
line-height: @tab-item-height--vertical;
66+
width: @tab-item-width--vertical;
67+
background-color: rgb(243, 243, 243);
68+
69+
&.@{prefix}-is-active {
70+
background-color: #fff;
71+
}
72+
}
5273
}
5374

5475
&__content {
@@ -62,6 +83,11 @@ page {
6283
display: flex;
6384
flex-wrap: nowrap;
6485
align-items: center;
86+
87+
&--left,
88+
&--right {
89+
flex-direction: column;
90+
}
6591
}
6692

6793
&__track {
@@ -70,12 +96,47 @@ page {
7096
z-index: 1;
7197
transition-duration: 0.3s;
7298
background-color: var(--td-tab-track-color, @tab-track-color);
99+
100+
&--left {
101+
left: 0;
102+
top: 0;
103+
width: var(--td-tab-track-thickness, @tab-track-thickness);
104+
}
105+
106+
&--right {
107+
right: 0;
108+
top: 0;
109+
width: var(--td-tab-track-thickness, @tab-track-thickness);
110+
}
111+
}
112+
113+
&__scroll {
114+
&--top,
115+
&--bottom {
116+
height: @tab-item-height--horizontal;
117+
position: relative;
118+
background-color: var(--td-tab-nav-bg-color, @tab-nav-background-color);
119+
120+
&::after {
121+
content: '';
122+
}
123+
}
124+
&--top {
125+
border-bottom: solid 1rpx var(--td-tab-border-color, @tab-border-color);
126+
}
73127
}
74128

75129
&__content-inner {
76130
display: block;
77131
}
78132

133+
&__sticky {
134+
&--left,
135+
&--right {
136+
width: @tab-item-width--vertical;
137+
}
138+
}
139+
79140
&.@{prefix}-tabs--top,
80141
&.@{prefix}-tabs--bottom {
81142
flex-wrap: wrap;
@@ -88,22 +149,6 @@ page {
88149
transition-property: transform;
89150
}
90151

91-
.@{prefix}-tabs__scroll {
92-
position: relative;
93-
background-color: var(--td-tab-nav-bg-color, @tab-nav-background-color);
94-
95-
&::after {
96-
content: '';
97-
}
98-
}
99-
100-
.@{prefix}-tabs__item {
101-
height: @tab-item-height--horizontal;
102-
line-height: @tab-item-height--horizontal;
103-
text-align: center;
104-
min-width: 162rpx;
105-
}
106-
107152
.@{prefix}-tabs__track {
108153
left: 0;
109154
bottom: 0;
@@ -115,27 +160,12 @@ page {
115160
}
116161
}
117162

118-
&.@{prefix}-tabs--top {
119-
.@{prefix}-tabs__scroll {
120-
height: @tab-item-height--horizontal;
121-
border-bottom: solid 1rpx var(--td-tab-border-color, @tab-border-color);
122-
}
123-
}
124-
125163
&.@{prefix}-tabs--bottom {
126164
flex-direction: column-reverse;
127-
128-
.@{prefix}-tabs__scroll {
129-
height: @tab-item-height--horizontal;
130-
}
131165
}
132166

133167
&.@{prefix}-tabs--left,
134168
&.@{prefix}-tabs--right {
135-
.@{prefix}-tabs__sticky {
136-
width: @tab-item-width--vertical;
137-
}
138-
139169
.@{prefix}-tabs__content-inner {
140170
position: relative;
141171
width: 100%;
@@ -145,26 +175,6 @@ page {
145175
transition-property: transform;
146176
}
147177

148-
.@{prefix}-tabs__scroll {
149-
width: auto;
150-
}
151-
152-
.@{prefix}-tabs__nav {
153-
flex-direction: column;
154-
}
155-
156-
.@{prefix}-tabs__item {
157-
text-align: center;
158-
height: @tab-item-height--vertical;
159-
line-height: @tab-item-height--vertical;
160-
width: @tab-item-width--vertical;
161-
background-color: rgb(243, 243, 243);
162-
163-
&.@{prefix}-is-active {
164-
background-color: #fff;
165-
}
166-
}
167-
168178
.@{prefix}-tabs__content {
169179
width: calc(100% - @tab-item-width--vertical);
170180
height: 100%;
@@ -175,21 +185,7 @@ page {
175185
}
176186
}
177187

178-
&.@{prefix}-tabs--left {
179-
.@{prefix}-tabs__track {
180-
left: 0;
181-
top: 0;
182-
width: var(--td-tab-track-thickness, @tab-track-thickness);
183-
}
184-
}
185-
186188
&.@{prefix}-tabs--right {
187189
flex-direction: row-reverse;
188-
189-
.@{prefix}-tabs__track {
190-
right: 0;
191-
top: 0;
192-
width: var(--td-tab-track-thickness, @tab-track-thickness);
193-
}
194190
}
195191
}

‎src/tabs/tabs.wxml

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<view class="{{classPrefix}} {{classPrefix}}--{{placement}} {{prefix}}-class">
44
<t-sticky
5-
t-class="{{classPrefix}}__sticky"
5+
t-class="{{classPrefix}}__sticky {{classPrefix}}__sticky--{{placement}}"
66
disabled="{{ !sticky }}"
77
z-index="{{ stickyProps.zIndex || '1' }}"
88
offset-top="{{ stickyProps.offsetTop }}"
@@ -11,24 +11,27 @@
1111
>
1212
<view class="{{classPrefix}}__wrapper">
1313
<scroll-view
14-
class="{{classPrefix}}__scroll"
14+
class="{{classPrefix}}__scroll {{classPrefix}}__scroll--{{placement}}"
1515
enable-flex
1616
scroll-left="{{offset}}"
1717
scroll-x="{{isScrollX}}"
1818
scroll-y="{{isScrollY}}"
1919
scroll-with-animation
2020
>
21-
<view class="{{classPrefix}}__nav">
21+
<view class="{{classPrefix}}__nav {{classPrefix}}__nav--{{placement}}">
2222
<view
2323
wx:for="{{tabs}}"
2424
wx:key="index"
2525
data-index="{{index}}"
26-
class="{{classPrefix}}__item {{prefix}}-class-item {{item.disabled ? (prefix + '-is-disabled') : '' }} {{currentIndex === index ? prefix + '-is-active ' + prefix + '-class-active' : ''}}"
26+
class="{{classPrefix}}__item {{classPrefix}}__item--{{placement}} {{prefix}}-class-item {{item.disabled ? (prefix + '-is-disabled') : '' }} {{currentIndex === index ? prefix + '-is-active ' + prefix + '-class-active' : ''}}"
2727
bind:tap="onTabTap"
2828
>
2929
{{item.label}}
3030
</view>
31-
<view class="{{classPrefix}}__track {{prefix}}-class-track" style="{{trackStyle}}" />
31+
<view
32+
class="{{classPrefix}}__track {{classPrefix}}__track--{{placement}} {{prefix}}-class-track"
33+
style="{{trackStyle}}"
34+
/>
3235
</view>
3336
</scroll-view>
3437
</view>

0 commit comments

Comments
 (0)