diff --git a/packages/vant/src/back-top/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/back-top/test/__snapshots__/demo-ssr.spec.ts.snap index e03ce5976..853e9e788 100644 --- a/packages/vant/src/back-top/test/__snapshots__/demo-ssr.spec.ts.snap +++ b/packages/vant/src/back-top/test/__snapshots__/demo-ssr.spec.ts.snap @@ -2,7 +2,6 @@ exports[`should render demo and match snapshot 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
``` -### 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}