Tabs

Tabs can be used to switch among different views.

Note: The tabs component does not support the function that the content in the tab adapts to the screen size.

Property	Description	Type	Default value	Mandatory
className	Custom class	String	-	false
activeCls	Class of custom active tabBar.	String	-	-
tabs	Tab data, including the option title `title` and badge type `badgeType`. badgeType can be `dot` or `text`. If the value of `badgeType` is not specified, no badge is displayed. The badge text `badgeText` is valid when `badgeType` is set to `text`.	Array<title, badgeType, badgeText>	-	true
activeTab	Index of the current active tabs.	Number	-	true
showPlus	Whether to display the ‘+’ icon.	Boolean	false	false
onPlusClick	Callback when you tap the ‘+’ icon.	() => {}	-	false
onTabClick	Callback when you tap a tab.	(index: Number) => void	-	false
onChange	Triggered when a tab changes.	(index: Number) => void	-	false
swipeable	Whether you can slide the content to switch the tab.	Boolean	true	false
duration	Duration of the sliding animation when swipeable is true, in ms.	Number	500 (ms)	false
tabBarBackgroundColor	Background color of the tabBar	String	-	false
tabBarActiveTextColor	Text color of the active tabs in the tabBar.	String	-	false
tabBarInactiveTextColor	Text color of the non-active tabs in the tabBar.	String	-	false
tabBarUnderlineColor	Color of the tabBar underline.	String	-	false
tabBarCls	Class of custom tabBar styles.	String	-	false

tab-content

View content

Property	Description	Type	Default value	Mandatory
index	Unique index of a list item.	String	-	-

Sample code

{
  "defaultTitle": "AntUI component library of the Mini Program",
  "usingComponents": {
    "tabs": "mini-antui/es/tabs/index",
    "tab-content": "mini-antui/es/tabs/tab-content/index"
  }
}

<view>
  <tabs
    tabs="{{tabs}}"
    showPlus="{{true}}"
    onTabClick="handleTabClick"
    onChange="handleTabChange"
    onPlusClick="handlePlusClick"
    activeTab="{{activeTab}}"
  >
    <block a:for="{{tabs}}">
      <tab-content key="{{index}}">
        <view class="tab-content">content of {{item.title}}</view>
      </tab-content>
    </block>
  </tabs>
</view>

Page({
  data: {
    tabs: [
      {
        title: 'Option',
        badgeType: 'text',
        badgeText: '6',
      },
      {
        title: 'Option 2',
        badgeType: 'dot',
      },
      { title: '3 Tab' },
      { title: '4 Tab' },
      { title: '5 Tab' },
    ],
    activeTab: 2,
  },
  handleTabClick({ index }) {
    this.setData({
      activeTab: index,
    });
  },
  handleTabChange({ index }) {
    this.setData({
      activeTab: index,
    });
  },
  handlePlusClick() {
    my.alert({
      content: 'plus clicked',
    });
  },
});

.tab-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}