blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Tabs): rename wrapper class to van-tab__panel-wrapper (#9951)

Browse Source
This commit is contained in:
neverland 2021-11-27 18:46:42 +08:00 committed by GitHub
parent ab45afd148
commit a302964a6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 37 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
View File

@ -111,7 +111,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
<div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -146,7 +146,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
</ul>
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper"
<div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"

28
packages/vant/src/icon/demo/index.vue
View File

@ -93,7 +93,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
<template>
<van-tabs v-model:active="tab" sticky>
<van-tab :title="t('demo')">
<van-tab class="demo-icon-tab-panel" :title="t('demo')">
<demo-block :title="t('basicUsage')">
<van-row>
<van-col span="6" @click="copy(demoIcon)">
@ -142,7 +142,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
</demo-block>
</van-tab>
<van-tab :title="t('basic')">
<van-tab class="demo-icon-tab-panel" :title="t('basic')">
<van-row>
<van-col
v-for="icon in icons.basic"
@ -156,7 +156,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
</van-row>
</van-tab>
<van-tab :title="t('outline')">
<van-tab class="demo-icon-tab-panel" :title="t('outline')">
<van-row>
<van-col
v-for="icon in icons.outline"
@ -170,7 +170,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
</van-row>
</van-tab>
<van-tab :title="t('filled')">
<van-tab class="demo-icon-tab-panel" :title="t('filled')">
<van-row>
<van-col
v-for="icon in icons.filled"
@ -190,16 +190,17 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
.demo-icon {
font-size: 0;
&-list {
box-sizing: border-box;
min-height: calc(100vh - 65px);
padding-top: 10px;
}
&-notify {
font-size: 13px;
}
&-tab-panel {
width: auto;
margin: 20px;
background-color: var(--van-background-color-light);
border-radius: 12px;
}
.van-col {
display: inline-block;
float: none;
@ -227,12 +228,5 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
color: var(--van-text-color);
font-size: 32px;
}
.van-tab__pane {
width: auto;
margin: 20px;
background-color: var(--van-background-color-light);
border-radius: 12px;
}
}
</style>

8
packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
View File

@ -64,7 +64,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs__content">
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
class="van-tab__panel demo-icon-tab-panel"
tabindex="0"
aria-labelledby="van-tabs-0"
style
@ -143,7 +143,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
class="van-tab__panel demo-icon-tab-panel"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
@ -151,7 +151,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
class="van-tab__panel demo-icon-tab-panel"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
@ -159,7 +159,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
class="van-tab__panel demo-icon-tab-panel"
tabindex="-1"
aria-labelledby="van-tabs-3"
style="display: none;"

2
packages/vant/src/tab/Tab.tsx
View File

@ -109,7 +109,7 @@ export default defineComponent({
<SwipeItem
id={id}
role="tabpanel"
class={bem('pane-wrapper', { inactive: !active.value })}
class={bem('panel-wrapper', { inactive: !active.value })}
tabindex={active.value ? 0 : -1}
aria-hidden={!active.value}
aria-labelledby={label}

4
packages/vant/src/tab/demo/index.vue
View File

@ -182,12 +182,12 @@ const beforeChange = (name: number) => {
vertical-align: -2px;
}
.van-tab__pane {
.van-tab__panel {
padding: 24px 20px;
background-color: var(--van-background-color-light);
}
.van-tabs--card .van-tab__pane {
.van-tabs--card .van-tab__panel {
background-color: transparent;
}
}

16
packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
View File

@ -758,7 +758,7 @@ exports[`should render demo and match snapshot 1`] = `
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper"
<div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"
@ -770,7 +770,7 @@ exports[`should render demo and match snapshot 1`] = `
content of tab 1
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -782,7 +782,7 @@ exports[`should render demo and match snapshot 1`] = `
content of tab 2
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -791,7 +791,7 @@ exports[`should render demo and match snapshot 1`] = `
style="width: 100px;"
>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -863,7 +863,7 @@ exports[`should render demo and match snapshot 1`] = `
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper"
<div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"
@ -875,7 +875,7 @@ exports[`should render demo and match snapshot 1`] = `
content of tab 1
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -887,7 +887,7 @@ exports[`should render demo and match snapshot 1`] = `
content of tab 2
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -896,7 +896,7 @@ exports[`should render demo and match snapshot 1`] = `
style="width: 100px;"
>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"

18
packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
View File

@ -395,7 +395,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
<div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper"
<div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"
@ -407,7 +407,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -419,7 +419,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -482,7 +482,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
<div style="transition-duration: 300ms; transform: translateX(-100px); width: 300px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -494,7 +494,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper"
<div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"
@ -506,7 +506,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -572,7 +572,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
<div style="transition-duration: 300ms; transform: translateX(-200px); width: 300px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -584,7 +584,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper"
<div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab"
role="tabpanel"
tabindex="0"
@ -596,7 +596,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
id="van-tab"
role="tabpanel"
tabindex="-1"