VTabs

A VTabs component is a group of vertical tabs, which is used together with VTabItem.

Note

Currently, a page can use only one VTabs component.

Property

Property	Type	Required	Default value	Description
index	number	No	0	The index that is currently activated.
className	string	No	-	The class name.

VTabsItem

Property	Type	Required	Default value	Description
tab	{title: string; disabled?: boolean, badge?: {type: 'dot' \| 'number' \| 'text', text: number \| string }}[]	Yes	-	The content of each tab.
className	string	No	-	The class name.

Event

VTabs

Event name	Description	Type
onChange	Callback fired when the panel is switched.	`(index: number) => void`

Slot

VTabs

Name	Description	Type
title	The custom title style.	The slot-scope.
icon	The custom icon style.	The slot-scope.

Style class

VTabs

Class name	Description
amd-vtabs	The style of the entire component.
amd-vtabs-bar	The style of the tab bar on the left.
amd-vtabs-bar-scroll-view	The style of the tab bar on the left.
amd-vtabs-bar-item-wrap	The style of a tab on the left.
amd-vtabs-bar-item	The style of a tab on the left.
`amd-vtabs-bar-item-active`	The style of a tab in activated state.
amd-vtabs-bar-item-disabled	The style of a tab in disabled state.
amd-vtabs-bar-item-title	The style of the title in a tab.
amd-vtabs-bar-item-count	The style of the badge in a tab.
amd-vtabs-bar-item-icon	The style of the icon slot in a tab.
amd-vtabs-content	The style of the content area on the right.
amd-vtabs-content-slides	The style of a single content area on the right.

VTabItem

Class name	Description
amd-vtabs-item	The style of the entire component.

Code sample

The following examples show how to use VTabs:

The following shows an example of the code in the index.axml file:

<vtabs 
  index="{{index}}"
  onChange="onChange">
  <view slot="title" slot-scope="prop">
    {{prop.tab.title}}
  </view>

  <view slot="icon" slot-scope="prop" a:if="{{prop.tab.title === 'Content 6'}}">
    <view class="badge"/>
  </view>

  <view slot="icon" slot-scope="prop" a:if="{{prop.tab.title === 'Content 7'}}">
    <view class="icon">
      <icon type="FireFill"/>
      </view>
  </view>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 1 ? 'currentItem': ''}}"
    tab="{{{title: 'Content 1'}}}">
    <text>content of content 1</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 2 ? 'currentItem': ''}}"
    tab="{{{title: 'The content is too long', count: 23}}}">
    <text>content of content 2</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 3 ? 'currentItem': ''}}"
    tab="{{{title: 'Content 3', disabled: true}}}">
    <view
      onTap="changeHeight"
      style="{{newHeight? `display: block;height: ${newHeight}vh`: ''}}">
      content of content 3
    </view>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 4 ? 'currentItem': ''}}"
    tab="{{{title: 'Content 4', count: 999, disabled: true}}}">
    <text>content of content 4</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 5 ? 'currentItem': ''}}"
    tab="{{{title: 'Content 5'}}}">
    <text>content of content 5</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 6 ? 'currentItem': ''}}"
    tab="{{{title: 'Content 6', badge: { type: 'text', text: 'discount'}}}}">
    <text>content of content 6</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 7 ? 'currentItem': ''}}"
    tab="{{{title: 'Content 7', badge:{type:'dot'}}}}">
    <text>content of content 7</text>
  </vtab-content>
</vtabs>

The following shows an example of the code in the index.js file:

Page({
  data: {
    index: 3,
    getVtabIndex: 0,
    newHeight: 100,
  },
  onLoad() {
    this.setData({
      getVtabIndex: this.data.index,
    });
  },
  onChange(idx) {
    this.setData({
      getVtabIndex: idx,
      index: idx,
    });
  },
  changeHeight() {
    this.setData({
      newHeight: this.data.newHeight + 20,
    });
  },
});

The following shows an example of the code in the index.acss file:

.vtabItem {
  transition: all 200ms linear;
  background-color: #fff;
}

.currentItem {
  color: #f00;
  background-color: #fff;
}

.vtabItem text {
  display: block;
  height: 100vh;
}
.badge {
  background: #ff411c;
  height: 9px;
  width: 9px;
  border-radius: 50%;
}
.badge-num {
  background: #ff411c;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 9px;
}

.icon .amd-icon {
  font-size: 14px;
  color: #ff411c;
}

The following shows an example of the code in the index.json file:

{
  "defaultTitle": "Vtabs",
  "usingComponents": {
    "vtabs": "antd-mini/es/VTabs/index",
    "vtab-content": "antd-mini/es/VTabs/VTabItem/index",
    "icon": "antd-mini/es/Icon/index"
  },
  "allowsBounceVertical": false
}