首页 > 其他分享 >优维低代码实践:菜单

优维低代码实践:菜单

时间:2023-09-12 18:04:08浏览次数:38  
标签:菜单 代码 配置 侧边 菜单栏 优维低

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

优维低代码实践:菜单_导航栏_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

标签:菜单,代码,配置,侧边,菜单栏,优维低
From: https://blog.51cto.com/u_15605878/7447021

相关文章

  • wkt转换成geojson的代码
    安装及导入(在安装shapely之前一定要先安装geos)pipinstallgeospipinstallshapely下面是一个使用Python将WKT转换为GeoJSON的代码示例:importjsonfromshapely.wktimportloadswkt="POINT(1010)"shape=loads(wkt)geojson=json.dumps(shape.__geo_inter......
  • 上位机使用JS SerialPort进行串口通信, 包含开发环境搭建和完整示例代码
    在嵌入式开发中,我们经常需要使用上位机(PC)与一些电路模块进行通信,用于获取一些传感器的数据,或者发送命令控制相应的电路模块。NodeJS目前支持使用SerialPort模块进行串口通信,本文主要介绍如何搭建测试开发环境和如何使用SerialPort进行串口通信。 开发前准备:1.下载安装NodeJS......
  • .NET Core(C#)通过SharpCifs访问操作Windows(smb)共享目录方法代码
    .NETCore(C#)通过SharpCifs访问操作Windows(smb)共享目录方法代码本文主要介绍.NETCore中,使用SharpCifs访问windows共享目录或smb协义共享目录,或操作共享文件的方法代码。 1、SharpCifs的安装引用使用Nuget管理工具搜索"SharpCifs"=>找到选择"安装"相关文档:VS(Vis......
  • 程序员 AI 助手来了,蚂蚁正式开源代码大模型 CodeFuse
    9月8日,外滩大会分论坛上,蚂蚁集团首次开源了代码大模型CodeFuse。支付宝小程序云负责人李铮宣布CodeFuse正式开源这是蚂蚁自研的代码生成专属大模型,根据开发者的输入提供智能建议和实时支持,帮助开发者自动生成代码、自动增加注释,自动生成测试用例,修复和优化代码等,以提升研发......
  • Vue2——监听页面滚动实现菜单和页面对应
    前言如题,监听页面的滚动并激活相应的菜单,一个老项目的维护,后面反正要全部重构,这里就先实现功能就好了;内容元素内容主要是添加相应的id,生成目录后直接通过锚点来跳转监听滚动window.addEventListener('scroll',()=>{constsections=document.getElementsByCla......
  • 低代码/零代码公司有哪些分类?代表产品有哪些?
    低代码/零代码公司是指提供低代码/零代码开发平台和工具的企业,旨在帮助用户通过简化开发过程、减少编码工作和提高效率快速构建应用程序。这些公司根据其定位和产品特点可以分为以下几个主要分类:综合型低代码/零代码公司:OutSystems:OutSystems是一家领先的低代码开发平台提供商。......
  • js实现页面打印功能实例代码(附去页眉页脚功能代码)
    <html><head></head><styletype="text/css"media="screen">@mediaprint{.print{display:block;}.notPrint{display:none;}}</style><scriptlanguage="javascript">functionprevi......
  • 不同小图标的编码网页中的大于号,小于号,应该用编码来代替,HTML中特殊字符和与之对应的A
    上面两个符号的HTML代码,>< >< 应用场景:当使用键盘无法打出来的时候。因为我测试在html代码中使用&amp;和&是等价的。带有实体名称的ASCII实体 常用的几个结果描述实体名称实体编号"quotationmark"&#34;'apostrophe&apos;&#39;&amper......
  • [代码随想录]Day42-动态规划part10
    题目:121.买卖股票的最佳时机思路:贪心做起来更简单;dp多此一举……状态0是有买入,状态1是代码:funcmaxProfit(prices[]int)int{lens:=len(prices)iflens==0{return0}dp:=make([][]int,lens)fori:=0;i<lens;i++{......
  • 删除百度网盘windows右键菜单的脚本
    以下代码保存为任意文件名.bat,然后右键“以管理员身份运行”即可regdeleteHKEY_CLASSES_ROOT\Directory\shellex\ContextMenuHandlers\YunShellExt/fregdeleteHKEY_CLASSES_ROOT\*\shellex\ContextMenuHandlers\YunShellExt/fpause     原文链接https://zhu......