mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Tabs): add show-header prop (#12408)
This commit is contained in:
neverland
GitHub
parent
4495fba799
commit
5829f9aa72
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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.sticky ? (
|
||||
<Sticky
|
||||
container={root.value}
|
||||
offsetTop={offsetTopPx.value}
|
||||
onScroll={onStickyScroll}
|
||||
>
|
||||
{renderHeader()}
|
||||
</Sticky>
|
||||
) : (
|
||||
renderHeader()
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{props.showHeader ? (
|
||||
props.sticky ? (
|
||||
<Sticky
|
||||
container={root.value}
|
||||
offsetTop={offsetTopPx.value}
|
||||
onScroll={onStickyScroll}
|
||||
>
|
||||
{renderHeader()}
|
||||
</Sticky>
|
||||
) : (
|
||||
renderHeader()
|
||||
)
|
||||
) : null}
|
||||
<TabsContent
|
||||
ref={contentRef}
|
||||
count={children.length}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user