Skip to main content

Layout Navigation

WdMenuLayout

Applicable Scenarios​

Commonly used in application layout design to achieve navigation + layout effect.

Basic Capabilities Description​

  1. In the layout type property, you can select "Top Navigation", "Left Navigation", "Factory-shaped Navigation", "Navigation Bar", and "Tab Bar Navigation". Each layout is adaptive on mobile devices.
  2. Menu properties support configuration of multi-end menu data, allowing flexible customization of display content and navigation logic for each menu. Supports up to three-level menus. Initial menu items can be "generated with one click based on pages".
  3. Dynamic menu implementation. For specific operations, refer to How to Configure a Dynamic Navigation Menu

Property Introduction​

Properties​

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

属性名
属性标识
类型
说明
布局模板templatestring

示例："horizontal"

菜单menuobject

菜单

示例：[]

侧边菜单展开defaultOpenedboolean

PC端左侧菜单和移动端侧边栏菜单是否默认展开

示例：true

点击外部收起菜单outerClickClosableboolean

移动端点击侧边栏菜单外部是否收起菜单

示例：true

选中的菜单keyselectedMenuKeystring

示例：""

Events​

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

事件名
事件code
事件出参 event.detail
适用情况
说明
点击菜单项menuClickobject
  • item: object 选中菜单项
    • title: string名称
    • key: stringkey值
    • iconUrl: string图标
    • iconPath: string自定义未选中图标
    • selectedIconPath: string自定义选中图标
    • disabled: boolean禁用菜单
    • visible: boolean显示菜单
    • type: string链接类型 可选值：link(外部链接) route(内部链接)
    • path: string跳转内部链接
    • linkUrl: string跳转外部链接
    • linkTargetBlank: boolean跳转开启新窗口
    • children: array
    • subPackageName: string子包名称
兼容三端

用户点击菜单选项，对Tab栏布局、顶部导航栏布局无效

Property API​

无

Method API​

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

方法名
方法标识
参数
方法说明
设置选中菜单项setSelectedInfoobject 选中项信息
  • key: string选中菜单key值
  • item: object 选中菜单项
    • title: string名称
    • key: stringkey值
    • iconUrl: string图标
    • iconPath: string自定义未选中图标
    • selectedIconPath: string自定义选中图标
    • disabled: boolean禁用菜单
    • visible: boolean显示菜单
    • type: string链接类型 可选值：link(外部链接) route(内部链接)
    • path: string跳转内部链接
    • linkUrl: string跳转外部链接
    • linkTargetBlank: boolean跳转开启新窗口
    • children: array
    • subPackageName: string子包名称

设置选中菜单项

Style API​

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

名称
类名
说明和示例
根元素.wd-menulayout组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-menulayout {
  /* 在这里编写CSS 样式 */
}
PC 端文本根元素.wd-pc-menulayout可以为 PC 端的组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-menulayout {
  /* 在这里编写CSS 样式 */
}
H5 端文本根元素.wd-h5-menulayout可以为 H5 端的组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-menulayout {
  /* 在这里编写CSS 样式 */
}
小程序端文本根元素.wd-mp-menulayout可以为小程序端的组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-menulayout {
  /* 在这里编写CSS 样式 */
}
布局导航头部.wd-menulayout-header可以为布局导航头部编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-header {
  /* 在这里编写CSS 样式 */
}
布局导航品牌插槽.wd-menulayout-header__logo-wrap可以为布局导航品牌插槽编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-header__logo-wrap {
  /* 在这里编写CSS 样式 */
}
布局导航主体.wd-menulayout-body可以为布局导航主体编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-body {
  /* 在这里编写CSS 样式 */
}
布局导航左侧内容.wd-menulayout-body__left可以为厂字或左侧布局导航的菜单主体编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-body__left {
  /* 在这里编写CSS 样式 */
}
布局导航底部内容.wd-menulayout-body__footer可以为布局导航的底部编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-body__footer {
  /* 在这里编写CSS 样式 */
}
布局导航页面内容.wd-menulayout-body__content可以为布局导航页面内容编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-body__content {
  /* 在这里编写CSS 样式 */
}
Tab栏布局导航根元素.wd-menulayout--tab可以为Tab栏布局导航根元素编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-menulayout--tab {
  /* 在这里编写CSS 样式 */
}

了解样式 API