Tabs

2024-05-31 10:14

Tabs allow the user to switch between different views.

Tabs

Property	Type	Default	Required	Description
className	String		No	Customized class.
activeCls	String			Customized class for activating tabbar.
tabs	Array		Yes	tab data, including the tab `title` . The badge type `badgeType` includes `dot` and `text` , and is not displayed if the `badgeType` is not set. Badge text `badgeText` takes effect when the `badgeType` is `text` .
activeTab	Number		Yes	Index of the currently active tab.
showPlus	Boolean	false	No	Show the “+” icon or not.
onPlusClick	() => {}		No	Callback when the “+” icon is clicked.
onTabClick	(index: Number) => void		No	Callback when the tab is clicked.
onChange	(index: Number) => void		No	Triggered when tab changes.
swipeable	Boolean	true	No	If it is possible to switch contents by swiping.
duration	Number	500(ms)	No	Duration of wiping animation in ms, when the swipeable is true.
tabBarBackgroundColor	String		No	tabBar background color.
tabBarActiveTextColor	String		No	Active Tab text color of the tabBar.
tabBarInactiveTextColor	String		No	Inactive Tab text color of the tabBar.
tabBarUnderlineColor	String		No	tabBar underline color.
tabBarCls	String		No	tabBar custom style class.

Tab-content

View content

Property	Description	Type
index	Unique index of list item.	String

Example

copy
{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "tabs": "mini-antui/es/tabs/index",
    "tab-content": "mini-antui/es/tabs/tab-content/index"
  }
}

copy
<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>

copy
Page({
  data: {
    tabs: [
      {
        title: 'Option',
        badgeType: 'text',
        badgeText: '6',
      },
      {
        title: 'Option two',
        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',
    });
  },
});

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