Tab tab page

introduce

Tab component for switching between different content areas.

Basic usage

Bind the index value corresponding to the currently active tag through v-model:active. The first tag is enabled by default.

<z-tabs v-model:active="active">
   <z-tab title="Tab 1">Content 1</z-tab>
   <z-tab title="Tab 2">Content 2</z-tab>
   <z-tab title="Tab 3">Content 3</z-tab>
   <z-tab title="Tab 4">Content 4</z-tab>
</z-tabs>

import { ref } from 'vue';
const active = ref(0);

Match by name

When the label specifies the name attribute, the value of v-model:active is the name of the current label (the label cannot be matched by the index value at this time).

<z-tabs v-model:active="activeName">
   <z-tab title="Tab 1" name="a">Content 1</z-tab>
   <z-tab title="Tab 2" name="b">Content 2</z-tab>
   <z-tab title="Tab 3" name="c">Content 3</z-tab>
</z-tabs>

import { ref } from 'vue';
const activeName = ref('b');

Tab bar scrolling

When the number of tabs exceeds 5, the tab bar can be scrolled horizontally, and the current tab will be automatically centered when switching.

<z-tabs v-model:active="active">
   <z-tab v-for="index in 8" :title="'tab ' + index">
     Content {{ index }}
   </z-tab>
</z-tabs>

Disable tags

A label can be disabled by setting the disabled attribute.

<z-tabs v-model:active="active">
   <z-tab title="Tab 1">Content 1</z-tab>
   <z-tab title="Tab 2" disabled>Content 2</z-tab>
   <z-tab title="Tab 3">Content 3</z-tab>
</z-tabs>

Style style

Tab supports two styles: line and card. The default is line style. You can switch the style through the type attribute.

<z-tabs v-model:active="active" type="card">
   <z-tab title="Tab 1">Content 1</z-tab>
   <z-tab title="Tab 2">Content 2</z-tab>
   <z-tab title="Tab 3">Content 3</z-tab>
</z-tabs>

Click event

When a tab is clicked, the click-tab event is triggered.

<z-tabs v-model:active="active" @click-tab="onClickTab">
   <z-tab title="Tab 1">Content 1</z-tab>
   <z-tab title="Tab 2">Content 2</z-tab>
</z-tabs>

import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const onClickTab = ({ title }: any) => toast.showToast(title)

Sticky layout

Sticky layout can be turned on through the sticky attribute. Under sticky layout, the tab will automatically stick to the top when it is scrolled to the top.

<z-tabs v-model:active="active" sticky>
   <z-tab v-for="index in 4" :title="'options ' + index">
     Content {{ index }}
   </z-tab>
</z-tabs>

Tips: If there is other content at the top of the page, you can set the distance from the top through the offset-top property. A custom navigation bar needs to declare the custom-navbar attribute.

Shrink layout

Shrink layout can be turned on through the shrink attribute. When turned on, all labels will be shrunk and aligned to the left.

<z-tabs v-model:active="active" shrink>
   <z-tab v-for="index in 4" :title="'options ' + index">
     Content {{ index }}
   </z-tab>
</z-tabs>

Custom labels

Label content can be customized through the title slot.

<z-tabs v-model:active="active">
   <z-tab v-for="index in 2">
     <template #title> <z-icon name="star" />Options </template>
     Content {{ index }}
   </z-tab>
</z-tabs>

Switch animation

The transition animation when switching tag content can be turned on through the animated attribute.

<z-tabs v-model:active="active" animated>
   <z-tab v-for="index in 4" :title="'options ' + index">
     Content {{ index }}
   </z-tab>
</z-tabs>

Slide switch

Swipe switching tabs can be enabled through the swipeable attribute.

<z-tabs v-model:active="active" swipeable>
   <z-tab v-for="index in 4" :title="'options ' + index">
     Content {{ index }}
   </z-tab>
</z-tabs>

Scroll Navigation

The scroll navigation mode can be enabled through the scrollspy attribute. In this mode, the content will be displayed tiles.

<z-tabs v-model:active="activeScrollspy" scrollspy>
   <view style="height: 1000rpx">
     <z-tab
       v-for="(item, index) in 18"
       :key="index"
       :title="`Tag ${item}`"
     >
       <view class="demo-tab-item"> Content{{ item }} </view>
     </z-tab>
   </view>
</z-tabs>

Asynchronous switching

The before-change attribute allows you to perform specific logic before switching tags.

<z-tabs v-model:active="activeBefore" :before-change="beforeChange">
   <z-tab
     v-for="(item, index) in 4"
     :key="index"
     :title="`Tag ${item}`"
   >
     <view class="demo-tab-item"> Content{{ item }} </view>
   </z-tab>
</z-tabs>

const beforeChange = (index: any) => {
   if (index === 1) {
     return false
   }
   return new Promise((resolve) => {
     resolve(index !== 3)
   })
}

Tips: Swiping through gestures will not trigger the before-change attribute.

Hide title bar

The title bar of Tabs can not be rendered by setting the showHeader property to false. In this case, you can control the active property of Tabs through some custom components.

<z-tabs v-model:active="active" :show-header="false">
   <z-tab v-for="index in 4"> Content {{ index }} </z-tab>
</z-tabs>

Tabs Props

Tab Props

Tabs Events

Tabs method

Through ref, you can get the Tabs instance and call the instance method.

Tabs Slots

Tab Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.