Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(tabs): add initial style and optimize code #68

Merged
merged 1 commit into from
Dec 30, 2021
Merged

refactor(tabs): add initial style and optimize code #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 2 additions & 29 deletions example/pages/tabs/tabs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
.t-tabs {
background-color: #fff;
}

.t-tab-panel {
background-color: #fff;
}

.t-tabs-vertical {
.custom-tabs-vertical {
.tab-content {
margin-top: 250rpx;
color: rgba(0, 0, 0, .26);
Expand All @@ -15,7 +7,7 @@
}
}

.t-tabs-horizontal {
.custom-tabs {
t-tab-panel {
text-align: center;
justify-content: center;
Expand All @@ -25,25 +17,6 @@
}
}

.scroll-item-horizontal {
height: 92rpx;
line-height: 92rpx;
}

.scroll-item-vertical {
line-height: 108rpx;
height: 108rpx;
width: 208rpx;
}

.active-item {
font-size: 32rpx;
}

.scroll-item-vertical {
background-color: rgba(243, 243, 243, 1);
}

.tabs-vertical-active {
background-color: #fff;
}
56 changes: 10 additions & 46 deletions example/pages/tabs/tabs.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,28 @@
<view class="demo-title">Tabs 选项卡</view>
<view class="demo-desc">用于内容分类后的展示切换。</view>
<t-demo title="01 类型" desc="横向选项卡">
<t-tabs
value="{{0}}"
bind:change="onTabsChange"
class="t-tabs-horizontal"
t-class-item="scroll-item-horizontal"
t-class="tabs-contianer"
>
<t-tabs value="{{0}}" bind:change="onTabsChange" t-class="custom-tabs">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
</t-tabs>
</t-demo>
<t-demo>
<t-tabs
value="{{0}}"
bind:change="onTabsChange"
class="t-tabs-horizontal"
t-class-item="scroll-item-horizontal"
>
<t-tabs value="{{0}}" bind:change="onTabsChange" t-class="custom-tabs">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
<t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>
</t-tabs>
</t-demo>
<t-demo>
<t-tabs
value="{{0}}"
bind:change="onTabsChange"
class="t-tabs-horizontal"
t-class-item="scroll-item-horizontal"
>
<t-tabs value="{{0}}" bind:change="onTabsChange" t-class="custom-tabs">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
<t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>
<t-tab-panel label="标签页四" value="3">标签四内容</t-tab-panel>
</t-tabs>
</t-demo>
<t-demo desc="超过屏幕滑动">
<t-tabs
value="{{0}}"
bind:change="onTabsChange"
class="t-tabs-horizontal"
t-class-item="scroll-item-horizontal"
>
<t-tabs value="{{0}}" bind:change="onTabsChange" t-class="custom-tabs">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
<t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>
Expand All @@ -58,8 +37,7 @@
value="{{0}}"
bind:change="onTabsChange"
showBottomLine="{{false}}"
class="t-tabs-horizontal"
t-class-item="scroll-item-horizontal"
t-class="custom-tabs"
>
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
Expand All @@ -71,9 +49,8 @@
<t-tabs
value="{{0}}"
bind:change="onTabsChange"
class="t-tabs-horizontal"
t-class-item="scroll-item-horizontal"
animation="{{animation}}"
t-class="custom-tabs"
>
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
Expand All @@ -82,12 +59,7 @@
</t-tabs>
</t-demo>
<t-demo title="02 状态" desc="选项卡状态">
<t-tabs
value="0"
bind:change="onTabsChange"
t-class-item="scroll-item-horizontal"
class="t-tabs-horizontal"
>
<t-tabs value="0" bind:change="onTabsChange" t-class="custom-tabs">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
<t-tab-panel label="禁用状态" value="2" disabled>禁用状态</t-tab-panel>
Expand All @@ -98,9 +70,7 @@
value="{{1}}"
placement="left"
bind:change="onTabsChange"
t-class-item="scroll-item-vertical"
t-class-active="tabs-vertical-active"
t-class="t-tabs-vertical"
t-class="custom-tabs-vertical"
>
<t-tab-panel label="标签页一" value="0">
<view class="tab-content">标签一内容区</view>
Expand All @@ -123,9 +93,8 @@
<t-tabs
value="{{0}}"
bind:change="onTabsChange"
t-class-item="scroll-item-horizontal"
t-class="t-tabs-horizontal"
t-class-active="active-item"
t-class="custom-tabs"
>
<t-tab-panel label="大尺寸" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
Expand All @@ -134,12 +103,7 @@
</t-tabs>
</t-demo>
<t-demo>
<t-tabs
value="{{0}}"
bind:change="onTabsChange"
t-class-item="scroll-item-horizontal"
t-class="t-tabs-horizontal"
>
<t-tabs value="{{0}}" bind:change="onTabsChange" t-class="custom-tabs">
<t-tab-panel label="小尺寸" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
<t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>
Expand Down
15 changes: 15 additions & 0 deletions src/tabs/tabs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
@import '../common/style/index.less';

@tab-item-height--horizontal: 92rpx;
@tab-item-height--vertical: 108rpx;
@tab-item-width--vertical: 208rpx;

.@{prefix}-tabs {
display: flex;
font-size: 28rpx;
background-color: #fff;

.@{prefix}-is-active {
font-weight: 700;
Expand Down Expand Up @@ -63,6 +68,8 @@
}

.@{prefix}-tabs__item {
height: @tab-item-height--horizontal;
line-height: @tab-item-height--horizontal;
text-align: center;
min-width: 162rpx;
}
Expand Down Expand Up @@ -109,6 +116,14 @@

.@{prefix}-tabs__item {
text-align: center;
height: @tab-item-height--vertical;
line-height: @tab-item-height--vertical;
width: @tab-item-width--vertical;
background-color: rgb(243, 243, 243);

&.@{prefix}-is-active {
background-color: #fff;
}
}

.@{prefix}-tabs__content {
Expand Down
2 changes: 1 addition & 1 deletion src/tabs/tabs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export default class Tabs extends SuperComponent {
this.setData({
trackStyle,
});
});
}).catch(console.log);
}

trigger(eventName: string, index: number) {
Expand Down
2 changes: 1 addition & 1 deletion src/tabs/tabs.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
wx:for="{{tabs}}"
wx:key="index"
data-index="{{index}}"
class="{{prefix}}-class-item {{classPrefix}}__item {{item.disabled ? (prefix + '-is-disabled') : '' }} {{currentIndex === index ? prefix + '-is-active ' + prefix + '-class-active' : ''}}"
class="{{classPrefix}}__item {{prefix}}-class-item {{item.disabled ? (prefix + '-is-disabled') : '' }} {{currentIndex === index ? prefix + '-is-active ' + prefix + '-class-active' : ''}}"
bind:tap="onTabTap"
>
{{item.label}}
Expand Down