Tab | Press UI

# Tab

Tab component for switching between different content areas.

# Basic usage

Use active to set the index value corresponding to the currently active label, and the first label is enabled by default.

<press-tabs
   :active="active"
   @change="onChange"
>
   <press-tab title="Tab 1">
     content 1
   </press-tab>
   <press-tab title="Tab 2">
     content 2
   </press-tab>
   <press-tab title="Tab 3">
     content 3
   </press-tab>
   <press-tab title="Tab 4">
     content 4
   </press-tab>
</press-tabs>

export default {
   data() {
     return {
       active: 1,
     }
   },
   methods: {
     onChange(value) {
       console.log('value', value);
     },
   }
};

# Match by name

When the tag specifies the name attribute, the value of active is the name of the current tag (at this time, the index value cannot be used to match the tag).

<press-tabs active="a">
   <press-tab title="Label 1" name="a">Content 1</press-tab>
   <press-tab title="Label 2" name="b">Content 2</press-tab>
   <press-tab title="Label 3" name="c">Content 3</press-tab>
</press-tabs>

# Horizontal scrolling

When there are more than 5 tabs, Tab can scroll horizontally.

<press-tabs active="{{ active }}">
   <press-tab title="Label 1">Content 1</press-tab>
   <press-tab title="Label 2">Content 2</press-tab>
   <press-tab title="Label 3">Content 3</press-tab>
   <press-tab title="Label 4">Content 4</press-tab>
   <press-tab title="Label 5">Content 5</press-tab>
   <press-tab title="Label 6">Content 6</press-tab>
</press-tabs>

# Disable tabs

Labels can be disabled by setting the disabled property. If you need to listen to the click event of the disabled tab, you can listen to the disabled event on press-tabs.

<press-tabs @disabled="onClickDisabled">
   <press-tab title="Label 1">Content 1</press-tab>
   <press-tab title="Label 2" disabled>Content 2</press-tab>
   <press-tab title="Label 3">Content 3</press-tab>
</press-tabs>

# Style Style

Tab supports two styles: line and card, the default is line style, you can modify the style through the type attribute.

<press-tabs type="card">
   <press-tab title="Label 1">Content 1</press-tab>
   <press-tab title="Label 2">Content 2</press-tab>
   <press-tab title="Label 3">Content 3</press-tab>
</press-tabs>

# click event

The click event can be bound to press-tabs, and the title and identifier of the clicked tab can be obtained in event.detail of the callback parameter.

<press-tabs @click="onClick">
   <press-tab title="Label 1">Content 1</press-tab>
   <press-tab title="Label 2">Content 2</press-tab>
</press-tabs>

# Sticky Layout

The sticky layout can be turned on through the sticky attribute. Under the sticky layout, when the Tab scrolls to the top, it will automatically suck the top.

<press-tabs sticky>
   <press-tab title="Label 1">Content 1</press-tab>
   <press-tab title="Label 2">Content 2</press-tab>
   <press-tab title="Label 3">Content 3</press-tab>
   <press-tab title="Label 4">Content 4</press-tab>
</press-tabs>

# Toggle animation

You can use animated to set whether to enable animation when switching tabs.

<press-tabs animated>
   <press-tab title="Label 1">Content 1</press-tab>
   <press-tab title="Label 2">Content 2</press-tab>
   <press-tab title="Label 3">Content 3</press-tab>
   <press-tab title="Label 4">Content 4</press-tab>
</press-tabs>

# Swipe to switch

Swipe to switch tabs can be enabled through the swipeable property.

<press-tabs swipeable>
   <press-tab title="Label 1">Content 1</press-tab>
   <press-tab title="Label 2">Content 2</press-tab>
   <press-tab title="Label 3">Content 3</press-tab>
   <press-tab title="Label 4">Content 4</press-tab>
</press-tabs>

# Nested popups

If you nest press-tabs inside a component or node that hides content like press-popup, the underline will not appear properly when the press-tabs are displayed.

This scenario can be circumvented by using wx:if to manually control the rendering of press-tabs.

<press-popup show="{{ show }}">
   <press-tabs wx:if="{{ show }}">
     <press-tab title="Label 1">Content 1</press-tab>
     <press-tab title="Label 2">Content 2</press-tab>
     <press-tab title="Label 3">Content 3</press-tab>
     <press-tab title="Label 4">Content 4</press-tab>
   </press-tabs>
</press-popup>

# API

# Tabs Props

Parameter	Description	Type	Default
type	style, optional value is `card`	string	`line`
color	label theme color	string	`#ee0a24`
active	Identifier of the currently selected tab	string \| number	`0`
duration	animation time, in seconds	number	`0.3`
line-width	bottom bar width, default unit `px`	string \| number	`40px`
line-height	bottom bar height, default unit `px`	string \| number	`3px`
animated	Whether to enable transition animation when switching tab content	boolean	`false`
border	Whether to display the outer border, only valid in the `line` style	boolean	`false`
ellipsis	Whether to omit too long header text	boolean	`true`
sticky	Whether to use sticky positioning layout	boolean	`false`
swipeable	Whether to enable gesture swipe switching	boolean	`false`
lazy-render	Whether to enable lazy rendering of tab content	boolean	`true`
offset-top	The minimum distance from the top of the sticky positioning layout, in `px`	number	-
swipe-threshold	Scroll threshold, when the number of tabs exceeds the threshold and the total width exceeds the width of the tab bar, horizontal scrolling starts	number	`5`
title-active-color	title active color	string	-
title-inactive-color	title inactive color	string	-
z-index	z-index level	number	`1`

# Tab Props

Parameter	Description	Type	Default
name	tag name, as an identifier for matching	string \| number	index value of tag
title	title	string	-
disabled	Whether to disable the label	boolean	`false`
dot	Whether to display a small red dot	boolean	-
info	Tip information in the upper right corner of the icon	string \| number	-
title-style	custom title style	string	-

# Tabs Slot

Name	Description
nav-left	content on the left side of the title
nav-right	content on the right side of the title

# Tab Slot

Name	Description
-	Tab content

# Tabs Event

Event Name	Description	Parameters
click	Triggered when a label is clicked	name: label identifier, title: title
change	Triggered when the currently active tab changes	name: tab identifier, title: title
disabled	Triggered when a disabled label is clicked	name: label identifier, title: title
scroll	Triggered when scrolling	{ scrollTop: the distance from the top position, isFixed: whether it is fixed to the top }

# External style classes

class name	description
custom-class	root node style class
nav-class	Tab bar style class
tab-class	Tab style class
tab-active-class	tab active state style class

# method

You can get the Tabs instance and call the instance method through selectComponent.

method name	parameters	return value	description
resize	-	-	When the size of the outer element or the display state of the component changes, this method can be called to trigger redrawing

# common problem

# The position of the bottom bar is wrong when the component is switched from hidden state to displayed state?

When the Tabs component is mounted, it will get its own width and calculate the position of the bottom bar. If the component is initially hidden, the obtained width will always be 0, so the bottom bar position cannot be displayed.

# Solution

Method 1, use wx:if to control the display of the component and make the component reinitialize.

<press-tabs wx:if="show" />

Method 2, call the resize method of the component to actively trigger redrawing.

<press-tabs id="tabs" />

this.selectComponent('#tabs').resize();

# Theme customization

--tabbar-height：

--tabbar-background-color：

--tabbar-item-font-size：

--tabbar-item-text-color：

--tabbar-item-active-color：

--tabbar-item-line-height：

--tabbar-item-icon-size：

--tabbar-item-margin-bottom：

--tab-text-color：

--tab-active-text-color：

--tab-disabled-text-color：

--tab-font-size：

--tabs-default-color：

--tabs-line-height：

--tabs-card-height：

--tabs-nav-background-color：

--tabs-bottom-bar-height：

--tabs-bottom-bar-color：

横屏

← Sidebar Tabbar →