blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Tab): add showTitle prop (#12394)

Browse Source
This commit is contained in:
Amumu 2023-10-28 19:06:14 +08:00 committed by GitHub
parent 0590efe9a8
commit f8cfc0ed44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 153 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/vant/src/back-top/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -2,6 +2,7 @@
exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div

1
packages/vant/src/empty/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -214,6 +214,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div

1
packages/vant/src/floating-panel/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -2,6 +2,7 @@
exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div

1
packages/vant/src/icon/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -2,6 +2,7 @@
exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<!--[-->
<div style>
<div
class="van-sticky"

1
packages/vant/src/index-bar/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -2,6 +2,7 @@
exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div

1
packages/vant/src/list/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -2,6 +2,7 @@
exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div

5
packages/vant/src/picker-group/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -24,6 +24,7 @@ exports[`should render demo and match snapshot 1`] = `
</button>
</div>
<div class="van-tabs van-tabs--line van-picker-group__tabs">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -1499,6 +1500,7 @@ exports[`should render demo and match snapshot 1`] = `
</button>
</div>
<div class="van-tabs van-tabs--line van-picker-group__tabs">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -2974,6 +2976,7 @@ exports[`should render demo and match snapshot 1`] = `
</button>
</div>
<div class="van-tabs van-tabs--line van-picker-group__tabs">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -4077,6 +4080,7 @@ exports[`should render demo and match snapshot 1`] = `
</button>
</div>
<div class="van-tabs van-tabs--line van-picker-group__tabs">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -5917,6 +5921,7 @@ exports[`should render demo and match snapshot 1`] = `
</button>
</div>
<div class="van-tabs van-tabs--line van-picker-group__tabs">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div

1
packages/vant/src/pull-refresh/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -2,6 +2,7 @@
exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div

12
packages/vant/src/tab/README.md
View File

@ -134,6 +134,18 @@ In sticky mode, the tab nav will be fixed to top when scroll to top.
</van-tabs>
```
### ShowTitle
If showTitle is falthy, title will not be rendered.
```html
<van-tabs v-model:active="active" :show-title="false">
<van-tab v-for="index in 4" :title="'option ' + index">
titleless content {{ index }}
</van-tab>
</van-tabs>
```
### Shrink
In shrink mode, the tabs will be shrinked to the left.

12
packages/vant/src/tab/README.zh-CN.md
View File

@ -143,6 +143,18 @@ export default {
> Tips: 如果页面顶部有其他内容，可以通过 offset-top 属性设置吸顶时与顶部的距离。
### 无标题模式
通过 `showTitle` 属性可以不渲染tab头部标题。
```html
<van-tabs v-model:active="active" :show-title="false">
<van-tab v-for="index in 4" :title="'选项 ' + index">
无title内容 {{ index }}
</van-tab>
</van-tabs>
```
### 收缩布局
通过 `shrink` 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。

150
packages/vant/src/tab/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -5,6 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -62,6 +63,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -109,6 +111,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -202,6 +205,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -250,6 +254,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--card">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -298,6 +303,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -337,6 +343,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<div style>
<div
class="van-sticky"
@ -404,6 +411,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -461,6 +469,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs van-tabs--card"
style="margin-top:var(--van-padding-lg);"
>
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -518,6 +527,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
@ -558,74 +568,6 @@ exports[`should render demo and match snapshot 1`] = `
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<div class="van-tabs__wrap">
<div
role="tablist"
class="van-tabs__nav van-tabs__nav--line"
style
aria-orientation="horizontal"
>
<!--[-->
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-swipe van-tabs__track">
<div
style="transition-duration:300ms;transform:translateX(0px);"
class="van-swipe__track"
>
<!--[-->
<!--[-->
<!--[-->
<!--[-->
<div
class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
style
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-0"
>
</div>
<div
class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
style
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-1"
>
</div>
<div
class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
style
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-2"
>
</div>
<div
class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
style
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-3"
>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<div class="van-tabs__wrap">
<div
@ -695,6 +637,77 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div
role="tablist"
class="van-tabs__nav van-tabs__nav--line"
style
aria-orientation="horizontal"
>
<!--[-->
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-swipe van-tabs__track">
<div
style="transition-duration:300ms;transform:translateX(0px);"
class="van-swipe__track"
>
<!--[-->
<!--[-->
<!--[-->
<!--[-->
<div
class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
style
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-0"
>
</div>
<div
class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
style
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-1"
>
</div>
<div
class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
style
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-2"
>
</div>
<div
class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
style
id="van-tab"
role="tabpanel"
tabindex="-1"
aria-hidden="true"
aria-labelledby="van-tabs-3"
>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<div style>
<div
class="van-sticky"
@ -806,6 +819,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<!--[-->
<div class="van-tabs van-tabs--line">
<!--[-->
<!--[-->
<div class="van-tabs__wrap">
<div

20
packages/vant/src/tab/test/index.spec.tsx
View File

@ -417,6 +417,26 @@ test('should allow to call scrollTo method when scrollspy is enabled', async ()
expect(onChange).toHaveBeenCalledWith('b', 'title2');
});
test('should not render title when showTitle is not truthy', async () => {
const wrapper = mount({
render() {
return (
<Tabs showTitle={false}>
<Tab title="title1">Text</Tab>
<Tab title="title2">Text</Tab>
<Tab title="title3">Text</Tab>
<Tab title="title4">Text</Tab>
<Tab title="title5">Text</Tab>
</Tabs>
);
},
});
await later();
const tabs = wrapper.findAll('.van-tabs__wrap,.van-sticky');
expect(tabs.length).toEqual(0);
});
test('should call before-change prop before changing', async () => {
const onChange = vi.fn();
const beforeChange = (name: number) => {

25
packages/vant/src/tabs/Tabs.tsx
View File

@ -64,6 +64,7 @@ export const tabsProps = {
color: String,
border: Boolean,
sticky: Boolean,
showTitle: truthProp,
shrink: Boolean,
active: makeNumericProp(0),
duration: makeNumericProp(0.3),
@ -479,16 +480,20 @@ export default defineComponent({
return () => (
<div ref={root} class={bem([props.type])}>
{props.sticky ? (
<Sticky
container={root.value}
offsetTop={offsetTopPx.value}
onScroll={onStickyScroll}
>
{renderHeader()}
</Sticky>
) : (
renderHeader()
{props.showTitle && (
<>
{props.sticky ? (
<Sticky
container={root.value}
offsetTop={offsetTopPx.value}
onScroll={onStickyScroll}
>
{renderHeader()}
</Sticky>
) : (
renderHeader()
)}
</>
)}
<TabsContent
ref={contentRef}