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

Jump to bottom

fix(tabs): update style #1339

Merged
merged 2 commits into from
Dec 30, 2022
Merged

fix(tabs): update style #1339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d324dc
fix(tabs): update style
LeeJim Dec 29, 2022
bea6bae
fix(tabs): update a11y
LeeJim Dec 29, 2022
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
67 changes: 47 additions & 20 deletions src/tabs/__test__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ exports[`Tabs Tabs base demo works fine 1`] = `
bind:click="onTabsClick"
>
<t-tab-panel
label="标签页一"
label="选项"
value="0"
/>
<t-tab-panel
label="标签页二"
label="选项"
value="1"
/>
</t-tabs>
Expand All @@ -24,15 +24,38 @@ exports[`Tabs Tabs base demo works fine 1`] = `
bind:click="onTabsClick"
>
<t-tab-panel
label="标签页一"
label="选项"
value="0"
/>
<t-tab-panel
label="标签页二"
label="选项"
value="1"
/>
<t-tab-panel
label="标签页三"
label="上限六个文字"
value="2"
/>
</t-tabs>
<t-tabs
defaultValue="{{0}}"
tClass="custom-tabs"
bind:change="onTabsChange"
bind:click="onTabsClick"
>
<t-tab-panel
label="选项"
value="0"
/>
<t-tab-panel
label="选项"
value="1"
/>
<t-tab-panel
label="选项"
value="2"
/>
<t-tab-panel
label="上限四字"
value="2"
/>
</t-tabs>
Expand All @@ -50,21 +73,25 @@ exports[`Tabs Tabs base demo works fine 1`] = `
bind:scroll="onStickyScroll"
>
<t-tab-panel
label="标签页一"
label="选项"
value="0"
/>
<t-tab-panel
label="标签页二"
label="选项"
value="1"
/>
<t-tab-panel
label="标签页三"
label="选项"
value="2"
/>
<t-tab-panel
label="标签页四"
label="选项"
value="3"
/>
<t-tab-panel
label="上限三字"
value="4"
/>
</t-tabs>
</base>
`;
Expand Down Expand Up @@ -123,39 +150,39 @@ exports[`Tabs Tabs size demo works fine 1`] = `
value="0"
/>
<t-tab-panel
label="标签页二"
label="选项"
value="1"
/>
<t-tab-panel
label="标签页三"
label="选项"
value="2"
/>
<t-tab-panel
label="标签页四"
label="选项"
value="3"
/>
</t-tabs>
<wx-view
style="height: 16px"
/>
<t-tabs
class="bigger"
defaultValue="{{0}}"
tClassActive="active-item"
>
<t-tab-panel
label="大尺寸"
value="0"
/>
<t-tab-panel
label="标签页二"
label="选项"
value="1"
/>
<t-tab-panel
label="标签页三"
label="选项"
value="2"
/>
<t-tab-panel
label="标签页四"
label="选项"
value="3"
/>
</t-tabs>
Expand All @@ -165,21 +192,21 @@ exports[`Tabs Tabs size demo works fine 1`] = `
exports[`Tabs Tabs status demo works fine 1`] = `
<status>
<t-tabs
defaultValue="0"
value="0"
bind:change="onTabsChange"
bind:click="onTabsClick"
>
<t-tab-panel
label="标签页一"
label="选中"
value="0"
/>
<t-tab-panel
label="标签页二"
label="默认"
value="1"
/>
<t-tab-panel
disabled="{{true}}"
label="禁用状态"
label="禁用"
value="2"
/>
</t-tabs>
Expand Down
16 changes: 8 additions & 8 deletions src/tabs/__test__/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ exports[`tabs :base 1`] = `
class="t-tabs__nav t-tabs__nav--left"
>
<wx-view
ariaControls="t_tabs_0_0"
ariaControls="t_tabs_0_panel_0"
ariaDisabled="{{false}}"
ariaRole="tab"
ariaSelected="{{true}}"
Expand All @@ -51,7 +51,7 @@ exports[`tabs :base 1`] = `
</wx-view>
</wx-view>
<wx-view
ariaControls="t_tabs_0_1"
ariaControls="t_tabs_0_panel_1"
ariaDisabled="{{false}}"
ariaRole="tab"
ariaSelected="{{false}}"
Expand All @@ -66,7 +66,7 @@ exports[`tabs :base 1`] = `
</wx-view>
</wx-view>
<wx-view
ariaControls="t_tabs_0_2"
ariaControls="t_tabs_0_panel_2"
ariaDisabled="{{false}}"
ariaRole="tab"
ariaSelected="{{false}}"
Expand All @@ -81,7 +81,7 @@ exports[`tabs :base 1`] = `
</wx-view>
</wx-view>
<wx-view
ariaControls="t_tabs_0_3"
ariaControls="t_tabs_0_panel_3"
ariaDisabled="{{false}}"
ariaRole="tab"
ariaSelected="{{false}}"
Expand Down Expand Up @@ -124,7 +124,7 @@ exports[`tabs :base 1`] = `
<wx-view
ariaRole="tabpanel"
class="t-tab-panel t-is-active"
id="t_tabs_0_0"
id="t_tabs_0_panel_0"
style="; "
>
标签一内容
Expand All @@ -134,7 +134,7 @@ exports[`tabs :base 1`] = `
<wx-view
ariaRole="tabpanel"
class="t-tab-panel "
id="t_tabs_0_1"
id="t_tabs_0_panel_1"
style="; display: none"
>
标签1内容
Expand All @@ -144,7 +144,7 @@ exports[`tabs :base 1`] = `
<wx-view
ariaRole="tabpanel"
class="t-tab-panel "
id="t_tabs_0_2"
id="t_tabs_0_panel_2"
style="; display: none"
>
标签2内容
Expand All @@ -154,7 +154,7 @@ exports[`tabs :base 1`] = `
<wx-view
ariaRole="tabpanel"
class="t-tab-panel "
id="t_tabs_0_3"
id="t_tabs_0_panel_3"
style="; display: none"
>
标签3内容
Expand Down
26 changes: 17 additions & 9 deletions src/tabs/_example/base/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
<t-tabs defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" 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="0" />
<t-tab-panel label="选项" value="1" />
</t-tabs>

<t-tabs defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" 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="0" />
<t-tab-panel label="选项" value="1" />
<t-tab-panel label="上限六个文字" value="2" />
</t-tabs>

<t-tabs defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs">
<t-tab-panel label="选项" value="0" />
<t-tab-panel label="选项" value="1" />
<t-tab-panel label="选项" value="2" />
<t-tab-panel label="上限四字" value="2" />
</t-tabs>

<t-tabs
Expand All @@ -18,8 +25,9 @@
bind:scroll="onStickyScroll"
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-tab-panel label="选项" value="0" />
<t-tab-panel label="选项" value="1" />
<t-tab-panel label="选项" value="2" />
<t-tab-panel label="选项" value="3" />
<t-tab-panel label="上限三字" value="4" />
</t-tabs>
14 changes: 7 additions & 7 deletions src/tabs/_example/size/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<t-tabs defaultValue="{{0}}">
<t-tab-panel label="小尺寸" value="0" />
<t-tab-panel label="标签页二" value="1" />
<t-tab-panel label="标签页三" value="2" />
<t-tab-panel label="标签页四" value="3" />
<t-tab-panel label="选项" value="1" />
<t-tab-panel label="选项" value="2" />
<t-tab-panel label="选项" value="3" />
</t-tabs>

<view style="height: 16px" />

<t-tabs defaultValue="{{0}}" t-class-active="active-item">
<t-tabs class="bigger" defaultValue="{{0}}">
<t-tab-panel label="大尺寸" value="0" />
<t-tab-panel label="标签页二" value="1" />
<t-tab-panel label="标签页三" value="2" />
<t-tab-panel label="标签页四" value="3" />
<t-tab-panel label="选项" value="1" />
<t-tab-panel label="选项" value="2" />
<t-tab-panel label="选项" value="3" />
</t-tabs>
18 changes: 3 additions & 15 deletions src/tabs/_example/size/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,3 @@
.custom-tabs {
margin-bottom: 32rpx;
}

.custom-tabs t-tab-panel {
text-align: center;
justify-content: center;
height: 172rpx;
line-height: 172rpx;
color: rgba(0, 0, 0, 0.26);
}

.active-item {
font-size: 32rpx;
}
.bigger {
--tab-font-size: 32rpx;
}
6 changes: 6 additions & 0 deletions src/tabs/_example/status/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
Component({
data: {
value: '0',
},
methods: {
onTabsChange(event) {
this.setData({
value: event.detail.value,
});
console.log(`Change tab, tab-panel value is ${event.detail.value}.`);
},

Expand Down
8 changes: 4 additions & 4 deletions src/tabs/_example/status/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<t-tabs defaultValue="0" bind:change="onTabsChange" bind:click="onTabsClick">
<t-tab-panel label="标签页一" value="0" />
<t-tab-panel label="标签页二" value="1" />
<t-tab-panel label="禁用状态" value="2" disabled />
<t-tabs value="{{value}}" bind:change="onTabsChange" bind:click="onTabsClick">
<t-tab-panel label="{{value == '0' ? '选中' : '默认'}}" value="0" />
<t-tab-panel label="{{value == '1' ? '选中' : '默认'}}" value="1" />
<t-tab-panel label="禁用" value="2" disabled />
</t-tabs>
4 changes: 2 additions & 2 deletions src/tabs/_example/tabs.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@
<t-demo desc="等距选项卡">
<scroll />
</t-demo>
<t-demo desc="带徽章选项卡">
<t-demo desc="带徽标选项卡">
<with-badge />
</t-demo>
<t-demo desc="带内容区选项卡">
<with-content />
<vertical />
<!-- <vertical /> -->
</t-demo>
<t-demo title="02 组件状态" desc="选项卡状态">
<status />
Expand Down
Loading