优维低代码实践:菜单
  e8Vk3bXIRRmD 2023年11月02日 32 0

优维低代码实践:菜单_导航栏

优维低代码实践:菜单_导航栏_02

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。


优维低代码实践连载第17期

《菜单》

在微应用中,通过菜单的配置,可以更方便、快速地跳转到其他页面;visual builder提供了快速配置菜单的方法,包括顶部导航栏、侧边菜单栏、面包屑等。还有更高阶的菜单注入,将其他微应用的菜单注入到当前微应用中。(PS: 以下的菜单配置方式均基于UI8.0)

一、顶部导航栏的配置

优维低代码实践:菜单_运维_03

优维低代码实践:菜单_菜单栏_04

优维低代码实践:菜单_导航栏_05

菜单层级如下:

优维低代码实践:菜单_菜单栏_06

调用菜单:

优维低代码实践:菜单_菜单栏_07

前端菜单显示:

优维低代码实践:菜单_菜单栏_08

二、侧边菜单栏

侧边菜单栏的配置与顶部导航栏的菜单配置一样,调用方式也一样,只是调用的key值不一样。

侧边菜单栏可以设置分组菜单、多层级菜单、平台内部链接以及平台外部链接

优维低代码实践:菜单_菜单栏_09

平台内部链接:

优维低代码实践:菜单_运维_10

平台外部链接:

优维低代码实践:菜单_菜单栏_11

分组菜单:

优维低代码实践:菜单_运维_12

优维低代码实践:菜单_运维_13

优维低代码实践:菜单_菜单栏_14

菜单调用:

优维低代码实践:菜单_运维_15

多层菜单:

优维低代码实践:菜单_导航栏_16

优维低代码实践:菜单_运维_17

优维低代码实践:菜单_运维_18

显示效果:

优维低代码实践:菜单_导航栏_19

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
e8Vk3bXIRRmD