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;" <div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
class="van-swipe__track" 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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -146,7 +146,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
</ul> </ul>
</div> </div>
</div> </div>
<div class="van-swipe-item van-tab__pane-wrapper" <div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="0" 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> <template>
<van-tabs v-model:active="tab" sticky> <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')"> <demo-block :title="t('basicUsage')">
<van-row> <van-row>
<van-col span="6" @click="copy(demoIcon)"> <van-col span="6" @click="copy(demoIcon)">
@ -142,7 +142,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
</demo-block> </demo-block>
</van-tab> </van-tab>
<van-tab :title="t('basic')"> <van-tab class="demo-icon-tab-panel" :title="t('basic')">
<van-row> <van-row>
<van-col <van-col
v-for="icon in icons.basic" v-for="icon in icons.basic"
@ -156,7 +156,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
</van-row> </van-row>
</van-tab> </van-tab>
<van-tab :title="t('outline')"> <van-tab class="demo-icon-tab-panel" :title="t('outline')">
<van-row> <van-row>
<van-col <van-col
v-for="icon in icons.outline" v-for="icon in icons.outline"
@ -170,7 +170,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
</van-row> </van-row>
</van-tab> </van-tab>
<van-tab :title="t('filled')"> <van-tab class="demo-icon-tab-panel" :title="t('filled')">
<van-row> <van-row>
<van-col <van-col
v-for="icon in icons.filled" v-for="icon in icons.filled"
@ -190,16 +190,17 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
.demo-icon { .demo-icon {
font-size: 0; font-size: 0;
&-list {
box-sizing: border-box;
min-height: calc(100vh - 65px);
padding-top: 10px;
}
&-notify { &-notify {
font-size: 13px; font-size: 13px;
} }
&-tab-panel {
width: auto;
margin: 20px;
background-color: var(--van-background-color-light);
border-radius: 12px;
}
.van-col { .van-col {
display: inline-block; display: inline-block;
float: none; float: none;
@ -227,12 +228,5 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
color: var(--van-text-color); color: var(--van-text-color);
font-size: 32px; font-size: 32px;
} }
.van-tab__pane {
width: auto;
margin: 20px;
background-color: var(--van-background-color-light);
border-radius: 12px;
}
} }
</style> </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 class="van-tabs__content">
<div id="van-tab" <div id="van-tab"
role="tabpanel" role="tabpanel"
class="van-tab__panel" class="van-tab__panel demo-icon-tab-panel"
tabindex="0" tabindex="0"
aria-labelledby="van-tabs-0" aria-labelledby="van-tabs-0"
style style
@ -143,7 +143,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div id="van-tab" <div id="van-tab"
role="tabpanel" role="tabpanel"
class="van-tab__panel" class="van-tab__panel demo-icon-tab-panel"
tabindex="-1" tabindex="-1"
aria-labelledby="van-tabs-1" aria-labelledby="van-tabs-1"
style="display: none;" style="display: none;"
@ -151,7 +151,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div id="van-tab" <div id="van-tab"
role="tabpanel" role="tabpanel"
class="van-tab__panel" class="van-tab__panel demo-icon-tab-panel"
tabindex="-1" tabindex="-1"
aria-labelledby="van-tabs-2" aria-labelledby="van-tabs-2"
style="display: none;" style="display: none;"
@ -159,7 +159,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div id="van-tab" <div id="van-tab"
role="tabpanel" role="tabpanel"
class="van-tab__panel" class="van-tab__panel demo-icon-tab-panel"
tabindex="-1" tabindex="-1"
aria-labelledby="van-tabs-3" aria-labelledby="van-tabs-3"
style="display: none;" style="display: none;"

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

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

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

@ -182,12 +182,12 @@ const beforeChange = (name: number) => {
vertical-align: -2px; vertical-align: -2px;
} }
.van-tab__pane { .van-tab__panel {
padding: 24px 20px; padding: 24px 20px;
background-color: var(--van-background-color-light); background-color: var(--van-background-color-light);
} }
.van-tabs--card .van-tab__pane { .van-tabs--card .van-tab__panel {
background-color: transparent; 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;" <div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track" 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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="0" tabindex="0"
@ -770,7 +770,7 @@ exports[`should render demo and match snapshot 1`] = `
content of tab 1 content of tab 1
</div> </div>
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -782,7 +782,7 @@ exports[`should render demo and match snapshot 1`] = `
content of tab 2 content of tab 2
</div> </div>
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -791,7 +791,7 @@ exports[`should render demo and match snapshot 1`] = `
style="width: 100px;" style="width: 100px;"
> >
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -863,7 +863,7 @@ exports[`should render demo and match snapshot 1`] = `
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;" <div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track" 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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="0" tabindex="0"
@ -875,7 +875,7 @@ exports[`should render demo and match snapshot 1`] = `
content of tab 1 content of tab 1
</div> </div>
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -887,7 +887,7 @@ exports[`should render demo and match snapshot 1`] = `
content of tab 2 content of tab 2
</div> </div>
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -896,7 +896,7 @@ exports[`should render demo and match snapshot 1`] = `
style="width: 100px;" style="width: 100px;"
> >
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" 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;" <div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
class="van-swipe__track" 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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="0" tabindex="0"
@ -407,7 +407,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
Text Text
</div> </div>
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -419,7 +419,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
Text Text
</div> </div>
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" 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;" <div style="transition-duration: 300ms; transform: translateX(-100px); width: 300px;"
class="van-swipe__track" 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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -494,7 +494,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
Text Text
</div> </div>
</div> </div>
<div class="van-swipe-item van-tab__pane-wrapper" <div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="0" tabindex="0"
@ -506,7 +506,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
Text Text
</div> </div>
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" 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;" <div style="transition-duration: 300ms; transform: translateX(-200px); width: 300px;"
class="van-swipe__track" 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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"
@ -584,7 +584,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
Text Text
</div> </div>
</div> </div>
<div class="van-swipe-item van-tab__pane-wrapper" <div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="0" tabindex="0"
@ -596,7 +596,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
Text Text
</div> </div>
</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" id="van-tab"
role="tabpanel" role="tabpanel"
tabindex="-1" tabindex="-1"