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.
tabs
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;
}