Tabs

2024-05-31 10:14

Mini-program developers can use the Tabs component to organize content into distinct groups, enabling users to easily switch between different views without leaving the current page. This topic covers the user experience, attribute details, and sample code for the Tabs component.

User experience

The following image shows different types of tabs:

Attributes

Attribute	Data type	Default	Description
className	String	N/A	The class name for the component.
style	String	N/A	The style for the component.
current	Number	N/A	The index of the current active tab.
defaultCurrent	Number	`0`	The index of the default active tab.
direction	String	`horizontal`	The direction of the tabs. Valid values are: `horizontal`: Displays the tabs in a horizontal orientation. `vertical`: Displays the tabs in a vertical orientation.
tabsBarClassName	String	N/A	The class name for the tab bar.
tabClassName	String	N/A	The class name for the individual tabs.
tabActiveClassName	String	N/A	The class name for the active tab.
items	Array<Item>	N/A	The individual tabs. Specify at least one tab.
plus	Slot	N/A	The slot for a button in the top-right corner. The slot-scope attribute includes value (corresponding to Item) and index (corresponding to the index of the Item).
title	Slot	N/A	The customized tab names. The slot-scope attribute includes value (corresponding to Item) and index (corresponding to the index of the Item).
type	String	`basic`	The tab type. Valid values are: `basic`: A text tab with the name only. `capsule`: A capsule-shaped tab with the name only. `mixin`: A tab that includes the name displayed in text format and additional text with a capsule-shaped background.
scrollMode	String	`edge`	The automatic scroll mode for the active tab. Valid values are: `edge`: Automatically scroll the active tab to ensure it is fully visible within the tab bar. `center`: Automatically scroll the active tab to the center of the tab bar.
onChange	EventHandle	N/A	The callback function that is triggered when the tab is switched.

Item

Note: The Item object supports customized attributes like content and badge, which is accessible via slot-scope. For more information, see the sample code in Item with customized attributes.

Attribute	Data type	Default	Description
title	String	N/A	The tab name.

Sample code

Tab examples

The following sample code shows how to create different tabs:

.axml

copy
<ant-container title="Basic tabs">
  <ant-tabs items="{{ items }}" />
</ant-container>

<ant-container title="Show content">
  <ant-tabs items="{{ items }}">
    <view
      class="content"
      slot-scope="item">
      {{ item.value.content }}
    </view>
  </ant-tabs>
</ant-container>

<ant-container title="Capsule-shaped tabs">
  <ant-tabs
    type="capsule"
    items="{{ items }}"
    defaultCurrent="{{ 1 }}" />
</ant-container>

<ant-container title="Show additional text">
  <ant-tabs
    type="mixin"
    items="{{ items }}" />
</ant-container>

<ant-container title="Show badges">
  <ant-tabs items="{{ items }}">
    <view
      slot="title"
      slot-scope="item">
      <view a:if="{{ item.value.badge }}">
        <ant-badge>{{ item.value.title }}</ant-badge>
      </view>
      <view a:else>{{ item.value.title }}</view>
    </view>
  </ant-tabs>
</ant-container>

<ant-container title="Disable tabs">
  <ant-tabs items="{{ items2 }}" />
</ant-container>

<ant-container title="onChange">
  <ant-tabs
    items="{{ items }}"
    onChange="onChange" />
</ant-container>

<ant-container title="Add plus button">
  <ant-tabs items="{{ items }}">
    <view slot="plus">
      <ant-icon
        type="AddOutline"
        onTap="onPlus" />
    </view>
  </ant-tabs>
</ant-container>

<ant-container title="Control mode">
  <ant-tabs
    items="{{ items }}"
    current="{{ current }}"
    onChange="handleChange" />
</ant-container>

<ant-container title="Customize content outside Tabs">
  <ant-tabs
    items="{{ items }}"
    current="{{ current }}"
    onChange="handleChange" />
  <view class="content">{{ items[current].content }}</view>
</ant-container>

.js

copy
Page({
    data: {
        current: 0,
        items: [
            {
                title: 'Fruits',
                subTitle: 'Additional text',
                content: 'Watermelon',
            },
            {
                title: 'Vegetables',
                subTitle: 'Addtional text',
                badge: true,
                content: 'Tomato',
            },
            {
                title: 'Animals',
                subTitle: 'Additional text',
                content: 'Ant',
            },
        ],
        items2: [
            {
                title: 'Fruits',
                subTitle: 'Addtional text',
                content: 'Watermelon',
            },
            {
                title: 'Vegetables',
                subTitle: 'Additional text',
                content: 'Tomato',
                disabled: true,
            },
            {
                title: 'Animals',
                subTitle: 'Additional text',
                content: 'Ant',
            },
        ],
    },
    onChange(current) {
        this.alert('current ' + current);
    },
    handleChange(current) {
        this.setData({
            current,
        });
    },
    onPlus() {
        this.alert('plus');
    },
    alert(content) {
        my.alert({
            title: content,
        });
    },
});

.acss

copy
.content {
  color: red;
  padding: 12px;
}

.json

copy
{
  "defaultTitle": "Tabs",
  "usingComponents": {
    "ant-container": "antd-mini/es/Container/index",
    "ant-tabs": "antd-mini/es/Tabs/index",
    "ant-badge": "antd-mini/es/Badge/index",
    "ant-icon": "antd-mini/es/Icon/index"
  }
}

Item with customized attributes

The following sample code shows how to define customized attributes in the Item object:

.js

copy
Page({
  data: {
    items: [
      {
        title: 'tab 1',
        content: 'tab 1 content',
      },
      {
        title: 'tab 2',
        content: 'tab 2 content',
      },
      {
        title: 'tab 3',
        content: 'tab 3 content'
      }
    ]
  }
})

.axml

copy
<ant-tabs items="{{items}}">
  <view slot="title" slot-scope="tab">
    {{ tab.index }}：{{ tab.value.title }}，{{ tab.value.content }}
  </view>
</ant-tabs>

FAQ

How can I trigger the onChange callback when the current active tab is clicked?

To trigger the onChange callback upon clicking the current active tab, you can use the onTap event on the tab's view element. See the following sample code for details:

Set the onTap events for the click events of the current active tab in the AXML file:

copy
<ant-tabs items="{{items}}" onChange="onChange">
  <view slot="title" slot-scope="tab" data-index="{{tab.index}}" onTap="onTap">
    {{ tab.value.title }}
  </view>
</ant-tabs>

Call the onChange method within the event handler in the JS file:

copy
Page({
  onChange(index) {
    console.log(index)
  },
  onTap(e) {
    const { index } = e.currentTarget.dataset
  }
})