Skip to main content
Supported Regions:上海

Top Tabs

WdTopTab

1. Applicable Scenarios​

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

Top tabs with icons, preceding icon:

Top 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.topTab1.selectedValue, where topTab1 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 below the component 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.topTab1.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' },
  { label: 'Label 3', value: '3' },
];

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.

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
Tag.listarray

Set the title of each tag in the top 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.topTab1.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: Once 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

-

Property 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 top navigation panel

Selected tagselectedValuestring

The selected value can be obtained using the expression $w.topTab1.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-top-tab-roottop tab root element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-top-tab-root {
  /* Write CSS styles here */
}
PC-side top tab root element.wd-pc-top-tab-rootWrite styles for the top tab on PC
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-top-tab-root {
  /* Write CSS styles here */
}
Top tab root element on H5.wd-h5-top-tab-rootWrite style for H5 top tab
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-top-tab-root {
  /* Write CSS styles here */
}
WeChat Mini Program top tab root element.wd-mp-top-tab-rootCan write style for top tab in mini program
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-top-tab-root {
  /* Write CSS styles here */
}
Top options area.wd-top-tab-root .wd-tabs__headerWrite styles for the top tab option area
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-top-tab-root .wd-tabs__header {
  /* Write CSS styles here */
}
Tag container.wd-top-tab-root .wd-tabs__itemWrite styles for the text tag container in the top tab
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-top-tab-root .wd-tabs__item {
  /* Write CSS styles here */
}
Tag container in selected status.wd-top-tab-root .wd-tabs__item.is-selectedWrite styles for the selected tag container in the top tab
:scope.wd-top-tab-root .wd-tabs__item.is-selected {
        /* 在这里编写CSS 样式*/
color: yellow;
font-size: 20px;
      }
Text label..wd-top-tab-root .wd-tabs__item-textCan write styles for the top tab text tag
:scope.wd-top-tab-root .wd-tabs__item-text {
        /* 在这里编写CSS 样式 */
font-size: 20px;
      }
Option icon (image).wd-top-tab-root .wd-tabs__item .wd-imageSet styles for option text tags
:scope.wd-top-tab-root .wd-tabs__item .wd-image {
        /* 在这里编写CSS 样式 */
width: 20px;
height: 20px;
      }
Option icon.wd-top-tab-root .wd-tabs__item .wd-iconSet styles for option text tags
:scope.wd-top-tab-root .wd-tabs__item .wd-icon {
        /* 在这里编写CSS 样式 */
font-size: 20px;
color: red;
      }
content area.wd-top-tab-root .wd-tabs__bodyYou can write styles for the top tab content area, such as setting the top tab content area height to fill the webpage.

        /* 设置顶部选项卡内容区域高度撑满页面 */
        /* 注意：此处需要设置为计算高度 【视口高度-选项卡头部标签区域高度】*/
      .wd-top-tab-root .wd-tabs__body {
        height: calc(100vh - 48px);
        overflow: auto;
      }
Overly long tab auto-sliding mask.wd-tabs-h5-root .wd-tabs__header-item-maskSet swipe background color for mobile terminal tabs. Note: Slide if tab content is overly long.
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-tabs-h5-root .wd-tabs__header-item-mask {
  /* Write CSS styles here */
}

Learn about Style API