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

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

@@ -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

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

@@ -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

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

@@ -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

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

@@ -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"

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

@@ -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

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

@@ -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

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

@@ -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

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

@@ -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

packages/vant/src/tab/README.md

@@ -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.

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

@@ -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` 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。

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

@@ -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

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

@@ -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) => {

packages/vant/src/tabs/Tabs.tsx

@@ -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 ? (
+        {props.showTitle && (
-          <Sticky
+          <>
-            container={root.value}
+            {props.sticky ? (
-            offsetTop={offsetTopPx.value}
+              <Sticky
-            onScroll={onStickyScroll}
+                container={root.value}
-          >
+                offsetTop={offsetTopPx.value}
-            {renderHeader()}
+                onScroll={onStickyScroll}
-          </Sticky>
+              >
-        ) : (
+                {renderHeader()}
-          renderHeader()
+              </Sticky>
+            ) : (
+              renderHeader()
+            )}
+          </>
         )}
         <TabsContent
           ref={contentRef}