```
-### ShowTitle
-
-If showTitle is falthy, title will not be rendered.
-
-```html
-
-
- titleless content {{ index }}
-
-
-```
-
### 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
+
+ content {{ index }}
+
+```
+
## 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_ | - |
diff --git a/packages/vant/src/tab/README.zh-CN.md b/packages/vant/src/tab/README.zh-CN.md
index 5478b15bb..ff11ee07a 100644
--- a/packages/vant/src/tab/README.zh-CN.md
+++ b/packages/vant/src/tab/README.zh-CN.md
@@ -143,18 +143,6 @@ export default {
> Tips: 如果页面顶部有其他内容,可以通过 offset-top 属性设置吸顶时与顶部的距离。
-### 无标题模式
-
-通过 `showTitle` 属性可以不渲染tab头部标题。
-
-```html
-
-
- 无title内容 {{ index }}
-
-
-```
-
### 收缩布局
通过 `shrink` 属性可以开启收缩布局,开启后,所有的标签会向左侧收缩对齐。
@@ -256,6 +244,16 @@ export default {
> Tips: 通过手势滑动不会触发 before-change 属性。
+### 隐藏标题栏
+
+通过将 `showHeader` 属性设置为 `false`,可以不渲染 Tabs 的标题栏。在这种情况下,你可以通过一些自定义组件来控制 Tabs 的 `active` 属性。
+
+```html
+
+ 内容 {{ index }}
+
+```
+
## 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_ | - |
diff --git a/packages/vant/src/tab/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/tab/test/__snapshots__/demo-ssr.spec.ts.snap
index d01b9bf83..a91d35fd2 100644
--- a/packages/vant/src/tab/test/__snapshots__/demo-ssr.spec.ts.snap
+++ b/packages/vant/src/tab/test/__snapshots__/demo-ssr.spec.ts.snap
@@ -5,7 +5,6 @@ exports[`should render demo and match snapshot 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{
+test('should not render header when showHeader is false', async () => {
const wrapper = mount({
render() {
return (
-
+
Text
Text
Text
diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx
index a89608041..0a1ec34ef 100644
--- a/packages/vant/src/tabs/Tabs.tsx
+++ b/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,
@@ -480,21 +480,19 @@ export default defineComponent({
return () => (
- {props.showTitle && (
- <>
- {props.sticky ? (
-
- {renderHeader()}
-
- ) : (
- renderHeader()
- )}
- >
- )}
+ {props.showHeader ? (
+ props.sticky ? (
+
+ {renderHeader()}
+
+ ) : (
+ renderHeader()
+ )
+ ) : null}