All Products
Search
Document Center

Tabs

Last Updated: Feb 04, 2021

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

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "tabs": "mini-antui/es/tabs/index",
  5. "tab-content": "mini-antui/es/tabs/tab-content/index"
  6. }
  7. }
  1. <view>
  2. <tabs
  3. tabs="{{tabs}}"
  4. showPlus="{{true}}"
  5. onTabClick="handleTabClick"
  6. onChange="handleTabChange"
  7. onPlusClick="handlePlusClick"
  8. activeTab="{{activeTab}}"
  9. >
  10. <block a:for="{{tabs}}">
  11. <tab-content key="{{index}}">
  12. <view class="tab-content">content of {{item.title}}</view>
  13. </tab-content>
  14. </block>
  15. </tabs>
  16. </view>
  1. Page({
  2. data: {
  3. tabs: [
  4. {
  5. title: 'Option',
  6. badgeType: 'text',
  7. badgeText: '6',
  8. },
  9. {
  10. title: 'Option 2',
  11. badgeType: 'dot',
  12. },
  13. { title: '3 Tab' },
  14. { title: '4 Tab' },
  15. { title: '5 Tab' },
  16. ],
  17. activeTab: 2,
  18. },
  19. handleTabClick({ index }) {
  20. this.setData({
  21. activeTab: index,
  22. });
  23. },
  24. handleTabChange({ index }) {
  25. this.setData({
  26. activeTab: index,
  27. });
  28. },
  29. handlePlusClick() {
  30. my.alert({
  31. content: 'plus clicked',
  32. });
  33. },
  34. });
  1. .tab-content {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. height: 300px;
  6. }