Skip to main content

Side Tabs

WdSideTab

1. Applicable Scenarios​

Provides a side tab layout that supports switching between multiple option tabs.

Side tabs with icons, preceding icon:

Side tabs with icons, icon after:

2. Basic Capabilities Description​

2.1 Label List Configuration​

Configure the displayed name and label value directly via the [label] property. Note: Label values must be unique.

If you need to configure dynamic labels, view the configuration Dynamic Label List

2.2 Get Selected Label Value​

You can retrieve the selected label value via $w.sideTab1.selectedValue, where sideTab1 is the component ID. View the current selected value as shown in the figure below:

Example: Dynamically filter and display different data in the list when switching tab labels​

As shown in the figure below, we want to filter and display the following "Order" data table separately by "Status". The expected results are as follows:

  • Pending
  • Processed

Below we will see how to achieve the above results.

  1. First, create a new data model and add test data, as shown in the figure below:

  1. Select the side tab component and disable the "Switch tabs to display different components" property

  2. In the "Label List" property, set the label list. Note: Label values will be used as query input parameters and must match the values in the data source.

  3. Place a data list in the component slot and bind the required data source.

  4. Set it as the filter condition for the data list, and retrieve the currently selected label value via $w.sideTab1.selectedValue.

When switching tabs, the corresponding "label value" will be used as a query input parameter to achieve dynamic data filtering.

2.3 Implement the side navigation effect by enabling the "Switch tabs to display different components" property​

In a single page, how to achieve the side navigation effect by switching tabs to display different components. Take the following text as an example:

  1. Enable the "Switch tabs to display different components" property, as shown in the figure below:
  1. After enabling it, several content slots will be added to the outline tree, each corresponding to a different tab, as shown below:
  1. Add different components to the content slot as needed, as shown in the figure below with a text component and an image component added respectively:

As can be seen, when switching tabs, different tabs display different component content.

  • Label 1
  • Label 2

Similarly, you can add more components to the content slots of other tabs.

2.4 Dynamic Label List Configuration​

When tab items are dynamic data retrieved from the database, dynamic expressions need to be bound, as shown in the figure below.

Here the required data format is:

[
  { label: 'Label 1', value: '1' },
  { label: 'Label 2', value: '2' }
];

Example: Dynamically generate tab labels using data model data​

The tab items in the side tabs are dynamically retrieved from the data model. The expected effect is as follows:

  1. Create a data model and add a new 'Status Name' field.

  2. Enter sample values for several statuses in this model, such as: Pending, To Be Shipped, Shipped

  3. Create a query named query1, select the newly created model for the data table. Trigger method: [Automatic], Method: [Query multiple records]. Run to view the results and save, as shown in the figure below:

  4. Disable the "Switch tabs to display different components" property of the component

  5. Click Bind Variable, bind the query result of query1 $w.query1.data.records, and convert the format to label and value.

$w.query1.data.records.map((item) => ({ label: item.ztmc, value: item.ztmc }));

where ztmc is the status field in the model

  1. Set [Default Label] as Text

You can see that the tab labels display the pre-entered data from the data model.

Property Introduction​

Properties​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
标签listarray

设置侧边导航面板各标签的标题

示例：[ { "label": "标签1", "value": "1", "iconType": "none", "innerIcon": "", "outerImage": "", "iconPosition": "prefix", "isDisabled": false, "slotKey": "1" }, { "label": "标签2", "value": "2", "iconType": "none", "innerIcon": "", "outerImage": "", "iconPosition": "prefix", "isDisabled": false, "slotKey": "2" }, { "label": "标签3", "value": "3", "iconType": "none", "innerIcon": "", "outerImage": "", "iconPosition": "prefix", "isDisabled": false, "slotKey": "3" } ]

选中标签selectedValuestring

选中值可通过表达式$w.sideTab1.selctedValue获取

默认值："1"

切换标签展示不同组件isMultipleSlotboolean

开启后，左侧大纲树将添加多个内容插槽。每个内容插槽中可添加不同的组件，实现同一页面「导航切换」的能力。注意：开启之后，标签列表不支持动态表达式。详见文档

开启后，各标签可展示不同内容区域

示例：false

Events​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击tap兼容三端

-

选项卡切换changeobject
  • value: string

    当前选中标签值
兼容三端

-

Property API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
标签listarray

设置侧边导航面板各标签的标题

选中标签selectedValuestring

选中值可通过表达式$w.sideTab1.selctedValue获取

切换标签展示不同组件isMultipleSlotboolean

开启后，各标签可展示不同内容区域

Method API​

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

方法名
方法标识
参数
方法说明
设置选中标签selectTabobject
  • value: string选中标签值

设置选中标签

Style API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-side-tab-root侧边选项卡根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-side-tab-root {
  /* 在这里编写CSS 样式 */
}
PC 端侧边选项卡根元素.wd-pc-side-tab-root可以为 PC 端的侧边选项卡编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-side-tab-root {
  /* 在这里编写CSS 样式 */
}
H5 端侧边选项卡根元素.wd-h5-side-tab-root可以为 H5 端的侧边选项卡编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-side-tab-root {
  /* 在这里编写CSS 样式 */
}
小程序端侧边选项卡根元素.wd-mp-side-tab-root可以为小程序端的侧边选项卡编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-side-tab-root {
  /* 在这里编写CSS 样式 */
}
左侧选项区域.wd-side-tab-root .wd-tabs__header可以为侧边选项卡左侧选项区域编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-side-tab-root .wd-tabs__header {
  /* 在这里编写CSS 样式 */
}
文本标签容器.wd-side-tab-root .wd-tabs__item可以为侧边选项卡文本标签容器编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-side-tab-root .wd-tabs__item {
  /* 在这里编写CSS 样式 */
}
选中态的标签容器.wd-side-tab-root.wd-tabs--vertical .wd-tabs__item.is-selected可以为侧边选项卡选中的标签容器编写样式
:scope.wd-side-tab-root.wd-tabs--vertical  .wd-tabs__item.is-selected {
        /* 在这里编写CSS 样式*/
color: yellow;
font-size: 20px;
      }
文本标签.wd-side-tab-root .wd-tabs__item-text可以为侧边选项卡文本标签编写样式
:scope.wd-side-tab-root .wd-tabs__item-text {
        /* 在这里编写CSS 样式 */
font-size: 20px;
      }
选项图标（图片）.wd-side-tab-root .wd-tabs__item .wd-image可以为选项文本标签设置样式
:scope.wd-side-tab-root .wd-tabs__item .wd-image {
        /* 在这里编写CSS 样式 */
width: 20px;
height: 20px;
      }
选项图标（图标）.wd-side-tab-root .wd-tabs__item .wd-icon可以为选项文本标签设置样式
:scope.wd-side-tab-root .wd-tabs__item .wd-icon {
        /* 在这里编写CSS 样式 */
font-size: 20px;
color: red;
      }
右侧内容区域.wd-side-tab-root .wd-tabs__body可以为侧边选项卡右侧内容区域编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-side-tab-root .wd-tabs__body {
  /* 在这里编写CSS 样式 */
}

了解样式 API

Frequently Asked Questions​

Why is there no scroll bar in the mini-program after setting the tab width?​

Due to mini-program restrictions, if you need to use a scroll view in the mini-program, you must add a scrolling container. Refer to the Scrolling Container Usage Documentation.