docs(Tabs): add show-header prop (#12408)

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -24,7 +24,6 @@ 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
@@ -1500,7 +1499,6 @@ 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
@@ -2976,7 +2974,6 @@ 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
@@ -4080,7 +4077,6 @@ 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
@@ -5921,7 +5917,6 @@ 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

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

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

packages/vant/src/tab/README.md

@@ -134,18 +134,6 @@ 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.
@@ -243,6 +231,18 @@ export default {
 };
 ```
 
+> Tips: The before-change callback will not be triggered by swiping gesture.
+
+### Hide Header
+
+By setting the `showHeader` prop to `false`, the title bar of the Tabs component can be hidden. In this case, you can control the `active` prop of the Tabs using custom components.
+
+```html
+<van-tabs v-model:active="active" :show-header="false">
+  <van-tab v-for="index in 4"> content {{ index }} </van-tab>
+</van-tabs>
+```
+
 ## API
 
 ### Tabs Props
@@ -264,6 +264,7 @@ export default {
 | swipeable | Whether to enable gestures to slide left and right | _boolean_ | `false` |
 | lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
 | scrollspy | Whether to use scrollspy mode | _boolean_ | `false` |
+| show-header `v4.7.3` | Whether to show title bar | _boolean_ | `true` |
 | offset-top | Sticky offset top , supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` |
 | swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` |
 | title-active-color | Title active color | _string_ | - |

packages/vant/src/tab/README.zh-CN.md

@@ -143,18 +143,6 @@ 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` 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。
@@ -256,6 +244,16 @@ export default {
 
 > Tips: 通过手势滑动不会触发 before-change 属性。
 
+### 隐藏标题栏
+
+通过将 `showHeader` 属性设置为 `false`，可以不渲染 Tabs 的标题栏。在这种情况下，你可以通过一些自定义组件来控制 Tabs 的 `active` 属性。
+
+```html
+<van-tabs v-model:active="active" :show-header="false">
+  <van-tab v-for="index in 4"> 内容 {{ index }} </van-tab>
+</van-tabs>
+```
+
 ## API
 
 ### Tabs Props
@@ -277,6 +275,7 @@ export default {
 | swipeable | 是否开启手势左右滑动切换 | _boolean_ | `false` |
 | lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
 | scrollspy | 是否开启滚动导航 | _boolean_ | `false` |
+| show-header `v4.7.3` | 是否显示标题栏 | _boolean_ | `true` |
 | offset-top | 粘性布局下吸顶时与顶部的距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
 | swipe-threshold | 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | _number \| string_ | `5` |
 | title-active-color | 标题选中态颜色 | _string_ | - |

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

@@ -5,7 +5,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -63,7 +62,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -111,7 +109,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -205,7 +202,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -254,7 +250,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--card">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -303,7 +298,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -343,7 +337,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <div style>
       <div
         class="van-sticky"
@@ -411,7 +404,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -469,7 +461,6 @@ 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
@@ -527,7 +518,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -567,7 +557,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -637,7 +626,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div
@@ -707,7 +695,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <div style>
       <div
         class="van-sticky"
@@ -819,7 +806,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-tabs van-tabs--line">
-    <!--[-->
     <!--[-->
     <div class="van-tabs__wrap">
       <div

packages/vant/src/tab/test/index.spec.tsx

@@ -417,11 +417,11 @@ 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 () => {
+test('should not render header when showHeader is false', async () => {
   const wrapper = mount({
     render() {
       return (
-        <Tabs showTitle={false}>
+        <Tabs showHeader={false}>
           <Tab title="title1">Text</Tab>
           <Tab title="title2">Text</Tab>
           <Tab title="title3">Text</Tab>

packages/vant/src/tabs/Tabs.tsx

@@ -64,7 +64,6 @@ export const tabsProps = {
   color: String,
   border: Boolean,
   sticky: Boolean,
-  showTitle: truthProp,
   shrink: Boolean,
   active: makeNumericProp(0),
   duration: makeNumericProp(0.3),
@@ -75,6 +74,7 @@ export const tabsProps = {
   offsetTop: makeNumericProp(0),
   background: String,
   lazyRender: truthProp,
+  showHeader: truthProp,
   lineWidth: numericProp,
   lineHeight: numericProp,
   beforeChange: Function as PropType<Interceptor>,
@@ -480,21 +480,19 @@ export default defineComponent({
 
     return () => (
       <div ref={root} class={bem([props.type])}>
-        {props.showTitle && (
+        {props.showHeader ? (
-          <>
+          props.sticky ? (
-            {props.sticky ? (
+            <Sticky
-              <Sticky
+              container={root.value}
-                container={root.value}
+              offsetTop={offsetTopPx.value}
-                offsetTop={offsetTopPx.value}
+              onScroll={onStickyScroll}
-                onScroll={onStickyScroll}
+            >
-              >
+              {renderHeader()}
-                {renderHeader()}
+            </Sticky>
-              </Sticky>
+          ) : (
-            ) : (
+            renderHeader()
-              renderHeader()
+          )
-            )}
+        ) : null}
-          </>
-        )}
         <TabsContent
           ref={contentRef}
           count={children.length}