All Products
Search
Document Center

Vertical tabs

Last Updated: Feb 04, 2021

Vertical tabs (vtabs) is used to switch among different views.

vtabs

Property Description Type Default value Mandatory
activeTab Index of the current active tabs. Number - true
tabs Tab data, including the option title title, unique anchor point value of the list, 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, anchor> - true
animated Whether to enable the animation. Boolean - false
swipeable Whether sliding to switch is valid. Boolean - true
tabBarActiveBgColor Background color when the tabBar is in active state. String - false
tabBarInactiveBgColor Background color when the tabBar is in non-active state. 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
tabBarlineColor Color of the tabBar side line. String - false
onTabClick Callback when you tap a tab. (index: Number) => void - false
onChange Triggered when vtab-content changes. (index: Number) => void - false

vtab-content

View content

Property Description Type Default value Mandatory
anchor Unique anchor point value of the list. String - true

Sample code

 
  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "vtabs": "mini-antui/es/vtabs/index",
  5. "vtab-content": "mini-antui/es/vtabs/vtab-content/index"
  6. }
  7. }
 
  1. <view>
  2. <vtabs
  3. tabs="{{tabs}}"
  4. onTabClick="handleChange"
  5. onChange="onChange"
  6. activeTab="{{activeTab}}"
  7. >
  8. <block a:for="{{tabs}}">
  9. <vtab-content anchor="{{item.anchor}}">
  10. <view style="border: 1px solid #eee; height: 800px; box-sizing: border-box">
  11. <text>content of {{item.title}}</text>
  12. </view>
  13. </vtab-content>
  14. </block>
  15. </vtabs>
  16. </view>
 
  1. Page({
  2. data: {
  3. activeTab: 2,
  4. tabs: [
  5. { title: 'Option 2', anchor: 'a', badgeType: 'dot' },
  6. { title: 'Option', anchor: 'b', badgeType: 'text', badgeText: 'New' },
  7. { title: 'No more than five characters', anchor: 'c' },
  8. { title: 'Option 4', anchor: 'd' },
  9. { title: 'Option 5', anchor: 'e' },
  10. { title: 'Option 6', anchor: 'f' },
  11. ],
  12. },
  13. handleChange(index) {
  14. this.setData({
  15. activeTab: index,
  16. });
  17. },
  18. onChange(index) {
  19. console.log('onChange', index);
  20. this.setData({
  21. activeTab: index,
  22. });
  23. },
  24. });