Skip to main content
Supported Regions:上海

Tab bar

WdTabBar

Applicable Scenarios​

to achieve the Tab bar navigation effect for pages

Basic Capabilities Description​

  1. In the label list properties, selecting a single label allows configuring properties such as label title, icon style, and redirect page. Supports setting independent menus for PC and mobile ends. The selected state is determined by the page attributes within the tab and is automatically matched.

Extended Scenarios Description​

Tab bar component fixed at the bottom of the page and reused across multiple pages​

  1. Click Layout Design in the upper-left corner of the editor to go to the Application Layout. Image 68a9ab83aaf20345de0122dd44fa0420
  2. Click New Layout and select Tab Bar Navigation Layout to create the Tab Bar Application Layout.Image 58302fcbf540182d272c41f06600eeac
  3. Return to "Page Design", select the page node in the outline tree, and in the page properties area, set the "Page Layout" to "Tab Bar Navigation Layout" to fix it to the bottom of the page.Image 30a1c700407c26c170a5170fd49d9967
  4. You can select other pages and set the "Page Layout" to "Tab Bar Navigation Layout" in the page properties area to reuse it.

Example​

Interactive Preview​

Property Introduction​

External properties received by the component

Property Name
Property Identifier
Type
Description
Tag list.tabsobject

Tag list.

Example: { "isMultiTerminal": false, "menuData": [ { "title": "标签1", "key": "1", "iconUrl": "td:home" }, { "title": "标签2", "iconUrl": "td:app", "key": "2" }, { "title": "标签3", "iconUrl": "td:user", "key": "3" } ], "mobileMenuData": [] }

routing moderouteTypestring

Route jumping method, this parameter is valid only when enable routing

Example: "redirectTo"

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
clicktapobject
  • tab: object

    当前点击的标签
    • title: string名称
    • key: stringkey值
    • iconUrl: string图标
    • iconPath: string自定义未选中图标
    • selectedIconPath: string自定义选中图标
    • disabled: boolean禁用菜单
    • visible: boolean显示菜单
    • type: string链接类型 Optional values:link(外部链接) route(内部链接)
    • path: string跳转内部链接
    • linkUrl: string跳转外部链接
    • linkTargetBlank: boolean跳转开启新窗口
    • subPackageName: string子包名称
Compatible with all platforms

-

Tab switchoverchangeobject
  • tab: object

    当前选中标签
    • title: string名称
    • key: stringkey值
    • iconUrl: string图标
    • iconPath: string自定义未选中图标
    • selectedIconPath: string自定义选中图标
    • disabled: boolean禁用菜单
    • visible: boolean显示菜单
    • type: string链接类型 Optional values:link(外部链接) route(内部链接)
    • path: string跳转内部链接
    • linkUrl: string跳转外部链接
    • linkTargetBlank: boolean跳转开启新窗口
    • subPackageName: 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 list.tabsarray
Selected tagselectedTabobject

Currently selected tag

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 tagssetSelectTabobject
  • key: string选中标签的Key值
  • isNavigate: boolean是否跳转菜单链接 Default value:

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-tabbarcomponent root element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-tabbar {
  /* Write CSS styles here */
}
PC-side root element.wd-pc-tabbarWrite styles for PC
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-tabbar {
  /* Write CSS styles here */
}
H5 root element.wd-h5-tabbarWrite style for H5
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-tabbar {
  /* Write CSS styles here */
}
Mini program root element.wd-mp-tabbarWrite style for mini program
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-tabbar {
  /* Write CSS styles here */
}
Tag container.wd-tabbar__itemSet style for the options area
:scope .wd-tabbar__item {
        /* 在这里编写CSS 样式*/
color: red;
font-size: 20px;
      }
Tag container in selected status.wd-tabbar__item.is-selectedSet style for the selected options area
:scope .wd-tabbar__item.is-selected {
        /* 在这里编写CSS 样式*/
color: yellow;
font-size: 20px;
      }
Option text tag.wd-tabbar__item-textSet styles for option text tags
:scope .wd-tabbar__item-text {
        /* 在这里编写CSS 样式 */
font-size: 20px;
      }
Option icon (image).wd-tabbar__item .wd-imageSet styles for option text tags
:scope .wd-tabbar__item .wd-image {
        /* 在这里编写CSS 样式 */
width: 20px;
height: 20px;
      }
Option icon.wd-tabbar__item .wd-iconSet styles for option text tags
:scope .wd-tabbar__item .wd-icon {
        /* 在这里编写CSS 样式 */
font-size: 20px;
color: red;
      }

Learn about Style API

Frequently Asked Questions​

How to set the text color in the selected state of the Tab bar?​

In the Tab bar, you can use the Style API to customize the text color in the selected state. By default, the selected state is set to blue, but this can also be modified by applying themes.