Vertical tabs (VTabs)

Properties

VTabs

Property	Type	Required	Default value	Description
index	number	No	0	Index of the currently active tab.
className	string	No	-	Custom CSS class name.

VTabsItem

Property	Type	Required	Default value	Description
tab	{title: string; disabled?: boolean, badge?: {type: 'dot' | 'number' | 'text', text: number | string }}[]	Yes	-	Configuration for each tab item, including title, disabled state, and badge.
className	string	No	-	Custom CSS class name.

Events

VTabs

Event Name	Description	Type
onChange	Triggered when the active tab changes.	(index: number) => void

Slots

VTabs

Name	Description	Type
title	Customize the tab title style.	Scoped slot
icon	Customize the tab icon style.	Scoped slot

Style classes

VTabs

Class name	Description
amd-vtabs	Overall container style.
amd-vtabs-bar	Style for the left tab bar.
amd-vtabs-bar-scroll-view	Style for the scrollable area of the left tab bar.
amd-vtabs-bar-item-wrap	Style for the tab title wrapper.
amd-vtabs-bar-item	Style for each tab title.
amd-vtabs-bar-item-active	Style for the active tab title.
amd-vtabs-bar-item-disabled	Style for a disabled tab title.
amd-vtabs-bar-item-title	Style for the title text within a tab.
amd-vtabs-bar-item-count	Style for the badge in a tab.
amd-vtabs-bar-item-icon	Style for the icon slot in a tab.
amd-vtabs-content	Style for the right content area.
amd-vtabs-content-slides	Style for an individual content panel on the right.

VTabItem

Class name	Description
amd-vtabs-item	Overall container style.

Code example

The following example demonstrates how to use VTabs.

The following code is for `index.axml`:

<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: 'Long title', 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 code is for `index.js`:

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 code is for `index.acss`:

.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 code is for `index.json`:

{
  "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
}