Skip to main content
Supported Regions:上海

Side Tabs

WdSideTab

1. Applicable Scenarios​

Provides a side tab layout that supports switching between multiple tab options.

Side Tabs with Icons, Leading Icon:

Side Tabs with Icons, Trailing Icon:

2. Basic Capabilities Description​

2.1 Configure Tags List​

Configure the display name and label value directly via the [label] property. Note: The label value must be unique.

If you need to configure dynamic tags, refer to the configuration dynamic tags list.

2.2 Obtain Selected Label Value​

The selected label value can be obtained via $w.sideTab1.selectedValue, where sideTab1 is the component ID. Refer to the image below to view the current selected value:

Example: Dynamically filter different data in the display 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

Let's demonstrate how to achieve the above effect.

  1. First, create a new data model and add test data. As shown in the figure below:
Image 9ebed115f6ff06340d7504baff39c760Image eb9cb9b64096fcfddceb58f5fe00049d

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

    Image de5c72300ec712e63aa3ff63ff4d654d

  2. Set the tag list in the "Tag List" property. Note: Tag values will be used as query input parameters and must exactly match the status values in the data source.

    Image 1d16e7f52edc9d37e207d5ca3b5f2ccd

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

    Image 217fe8d1997838461a240a1696a38193

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

Image 8cfed8678babc92bbd8ec4dbe2fc9b64

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 and enable the "Switch tabs to display different components" property.​

How to implement the [side navigation effect] by switching tabs to display different components within a single page. Take the following text as an example:

  1. Enable the [Switch tabs to display different components] property, as shown below:
  1. After enabling, several content slots will appear in the outline tree, each corresponding to different tabs, as shown below:
  1. Add different components to the content slots as needed. For example, add a text component and an image component respectively, as shown below:
Image b34452a1f7ea29dc21201bd7cc49ffb3

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

  • Tab 1
  • Tab 2

Similarly, you can place more components into the content slots of other tabs.

2.4 Configure Dynamic Tags List​

When the tab items are dynamic data obtained from the database, you need to bind dynamic expressions, as shown below.

At this point, the data format must be:

[
  { label: 'Tab 1', value: '1' },
  { label: 'Tab 1', value: '1' },
];

Example: Dynamically generate tab labels via data model data​

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

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

    Image 18dc3a749bb2ba13d5d3b75a3b633cbc

  2. Enter several status example values in this model, such as: Pending, Ready to Ship, Shipped

    Image 06db9d5a104341e66ad973738c9de517

  3. Create a query named query1, select the data model you just created as the data table. Trigger method [Automatic], method [Query Multiple], run it to view the results and save. As shown below:

    Image b2927e84efac8cc391fbd056373c048f

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

    Image de5c72300ec712e63aa3ff63ff4d654d

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

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

where ztmc is the status field in the model

Image e5e2330f9f385f83b1fbf44e6e419d59
  1. Set [Default Label] as textImage c05f810dee7958f9830b697a9982e296

You will find that the tab labels display the pre-entered data from the data model.

Property Introduction​

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
Tag.listarray

Set the title of each tag in the side navigation panel

Example: [ { "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" } ]

Selected tagselectedValuestring

The selected value can be obtained using the expression $w.sideTab1.selectedValue.

Default value: "1"

Switch tags to show different componentsisMultipleSlotboolean

Once enabled, the left-side outline tree will add multiple content slots. Each content slot can include different components to achieve the ability of "navigation switchover" on the same page. Note: After being enabled, the tag list does not support dynamic expressions. See the document for details

When enabled, each tag can show different content areas

Example: false

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
clicktapCompatible with all platforms

-

Tab switchoverchangeobject
  • value: string

    当前选中标签值
Compatible with all platforms

-

Properties API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
Tag.listarray

Set the title of each tag in the side navigation panel

Selected tagselectedValuestring

The selected value can be obtained using the expression $w.sideTab1.selectedValue.

Switch tags to show different componentsisMultipleSlotboolean

When enabled, each tag can show different content areas

Method API​

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name
Method Identifier
Parameters
Method Description
Set selected tagsselectTabobject
  • value: string选中标签值

Set selected tags

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
root element.wd-side-tab-rootside tab root element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-side-tab-root {
  /* Write CSS styles here */
}
PC-side side tab root element.wd-pc-side-tab-rootWrite styles for the side tab on PC
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-side-tab-root {
  /* Write CSS styles here */
}
Side tab root element in H5.wd-h5-side-tab-rootWrite styles for the side tab in the H5
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-side-tab-root {
  /* Write CSS styles here */
}
WeChat Mini Program side tab root element.wd-mp-side-tab-rootCan write styles for the side tab in the mini program
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-side-tab-root {
  /* Write CSS styles here */
}
Left options area.wd-side-tab-root .wd-tabs__headerWrite styles for the left-side options area of the side tab
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-side-tab-root .wd-tabs__header {
  /* Write CSS styles here */
}
Tag container.wd-side-tab-root .wd-tabs__itemWrite style for the text tag container in the side tab
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-side-tab-root .wd-tabs__item {
  /* Write CSS styles here */
}
Tag container in selected status.wd-side-tab-root.wd-tabs--vertical .wd-tabs__item.is-selectedWrite styles for the selected tag container in the side tab
:scope.wd-side-tab-root.wd-tabs--vertical  .wd-tabs__item.is-selected {
        /* 在这里编写CSS 样式*/
color: yellow;
font-size: 20px;
      }
Text label..wd-side-tab-root .wd-tabs__item-textCan write styles for the side tab text tag
:scope.wd-side-tab-root .wd-tabs__item-text {
        /* 在这里编写CSS 样式 */
font-size: 20px;
      }
Option icon (image).wd-side-tab-root .wd-tabs__item .wd-imageSet styles for option text tags
:scope.wd-side-tab-root .wd-tabs__item .wd-image {
        /* 在这里编写CSS 样式 */
width: 20px;
height: 20px;
      }
Option icon.wd-side-tab-root .wd-tabs__item .wd-iconSet styles for option text tags
:scope.wd-side-tab-root .wd-tabs__item .wd-icon {
        /* 在这里编写CSS 样式 */
font-size: 20px;
color: red;
      }
Content area on the right.wd-side-tab-root .wd-tabs__bodyWrite style for the content area on the right of the side tab
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-side-tab-root .wd-tabs__body {
  /* Write CSS styles here */
}

Learn about Style API

Frequently Asked Questions​

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

Due to mini-program restrictions, if scrolling views are required on the mini-program side, a scroll container must be added. Refer to the Scroll Container Usage Documentation for details.