Tabs

2022-07-29 06:32

Tabs allow the user to switch between different views.

Tabs

Attribute Name	Description	Type	Default	Mandatory
className	Custom class	String		false
activeCls	Customized class for activating tabbar	String
tabs	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`.	Array		true
activeTab	Index of the currently active tab	Number		true
showPlus	Show the “+” icon or not	Boolean	false	false
onPlusClick	Callback when the “+” icon is clicked	() => {}		false
onTabClick	Callback when the tab is clicked	(index: Number) => void		false
onChange	Triggered when tab changes	(index: Number) => void		false
swipeable	If it is possible to switch contents by swiping	Boolean	true	false
duration	Duration of wiping animation in ms, when the swipeable is true	Number	500(ms)	false
tabBarBackgroundColor	tabBar background color	String		false
tabBarActiveTextColor	Active Tab text color of the tabBar	String		false
tabBarInactiveTextColor	Inactive Tab text color of the tabBar	String		false
tabBarUnderlineColor	tabBar underline color	String		false
tabBarCls	tabBar custom style class	String		false

Tab-content

View content

Attribute Name	Description	Type	Default	Mandatory
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;
}