inBuilder 低代码平台新特性推荐 - 第二十期

news2024/12/24 2:25:32

今天来给大家带来的是 inBuilder 低代码平台特性推荐系列第二十期——菜单导航模式个性化示例。

场景介绍

目前平台提供了四种菜单导航模式,包括分组视图、列表视图、横向视图、平铺视图,均为横向导航,这些也是主流的菜单导航模式。

在某些项目上用户希望使用左侧树导航,也就是也就是将导航菜单放置左侧固定,页面布局上基本为左右结构,针对这类的菜单个性化定制需求,平台也提供了扩展的机制。

本文将呈现两种菜单个性化定制效果,如下,并详细描述扩展的过程。

1、左侧树导航, 将菜单栏放置在左侧,页面布局上基本为左右结构,将导航菜单放置左侧固定

2、混合导航,顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部,通过一级菜单的点击后,展示侧边的二、三级菜单 。

运行效果

1、侧边导航

本例在默认风格科技蓝的基础上进行调整,整个风格还是蓝色基调,运行效果如下图:

2、 混合导航效果如下:

开发步骤

说明: 运行框架将主界面视图层划分了多个可扩展的区域(如下图示意):顶部header、workbench左侧、workbench右侧,重写可扩展区域的DOM结构,可以实现多种导航模式,如:左侧树导航(运行效果图1)、混合式导航(运行效果图2)。实现过程主要分两步:

第一步: 扩展框架预留的加载前扩展脚本【\web\platform\runtime\common\web\gsprtf\preload.js】,扩展脚本中预留了约定的扩展方法,定制实现预留方法,可重写界面布局,实现想要的菜单导航模式。

第二步: 基于第一步,扩展的DOM里会用到很多自定义的样式,那么可以将自定义样式定制为扩展主题皮肤,框架加载扩展DOM的时候,可以加载这些自定义样式。

以下两种导航模式的实现过程均基于这两步实现,具体实现过程请参见下文1左侧树导航实现过程和2混合导航实现过程。

1 左侧树导航实现过程

1.1 扩展框架预留的preload.js脚本

框架预留了加载前扩展脚本【\web\platform\runtime\common\web\gsprtf\preload.js】,并提供了加载前的扩展服务接口,在框架加载前,可以从扩展脚本preload.js里边调用,可以获取菜单、工具栏、个人信息等相关内容,支持ajax通信。根据菜单、工具栏等基本信息,可以构建扩展布局结构。

本例场景1中要实现左侧树导航模式,那么可以修改preload.js,在此文件的getCustomLeftAreaTemp()方法中返回组织好的竖导航DOM结构,因为扩展脚本较多,可点击下载本例交付物,查看preload.js文件。

1.2 扩展主题皮肤

上一步骤中扩展的树形导航DOM里会用到很多自定义的样式,那么可以将自定义样式定制为扩展主题皮肤,框架加载扩展DOM的时候,可以加载这些自定义样式。

1.2.1 预制主题皮肤数据

预制主题皮肤数据需要在对应数据库表中预制,主题皮肤配置表为gspThemesConfig ,打开 gspThemesConfig后,手动插入一条数据,即新增一种新颜色的配置,在填写各列值时可参考type值为color的默认配置行中的各列值,需要注意的是要将新增行的”defaultflag”列值设置为1,即设置为默认样式;其余type值为color的配置行的“defaultflag”列值全设置为0。

本例新增的主题配置数据如下红框内:

1.2.2 添加样式

1.在【\web\platform\runtime\sys\web\assets\style\themes】目录下新建文件夹“HandsOnLab”,即以新主题的标识(颜色)命名,该主题(颜色)对应表【gspthemesconfig】中的code列值,即上图红框处。

2.基于上一步骤,在【\web\platform\runtime\sys\web\assets\style\themes\HandsOnLab】目录下添加“gsp-cloud-web.css”文件,可以用来对首页样式以及自定义的竖导航样式进行修改。 可点击下载本例交付交付物本例交付交付物,查看“gsp-cloud-web.css”文件。

3.在【\web\platform\runtime\sys\web\assets\style\themes\HandsOnLab】目录下添加“fonts”文件夹,放置“FontAwesome”图表库相关文件。可点击下载本例交付交付物本例交付交付物,查看“FontAwesome”文件。

4.在【\web\platform\runtime\sys\web\assets\custom\launcher】目录下放置图标logo图片。

1.3 修改主页标题

在本例场景1中,即运行效果中第一个界面,修改了主页的Logo和标题,改成了“HandsOnLab 动手实验室”,

如果项目上也替换程自己的Logo或者标题,那么可以直接打开 gspFrameworkConfig表,修改id为“frm-custom-config-key”这条记录,配置首页标题,以及菜单展开按钮的显隐,修改“frmconfigs” 列的值为,

1.  {"logoImg":"handsonlablogo.png","frmIcon":"", "frmShortcutIcon":"","navigationShown":0}

其中logoImg为 运行框架左上角LOGO文件名称 ,

将文件部署在“\web\platform\runtime\sys\web\assets\custom\launcher”路径下 。

1.4 选择主题

欢迎大家下载inBuilder开源社区版,体验上述特性,开启低代码开发之旅!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1795045.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

UML实现图-组件图

概述 组件图(ComponentDiagram)描述了软件的各种组件和它们之间的依赖关系。组件图中通常包含4种元素:组件、程序、包、任务,各个组件之间还可以相互依赖。 一、组件的表示法 组件是定义了良好接口的物理实现单元,是系统中可替换的物理部件。在一般情…

JAVA-学习-2

一、类 1、类的定义 把相似的对象划分了一个类。 类指的就是一种模板,定义了一种特定类型的所有对象的属性和行为 在一个.java的问题件中,可以有多个class,但是智能有一个class是用public的class。被声明的public的class,必须和文…

AdSet通过审核并入驻全国SDK管理服务平台

SDK、API、H5是三种常见的APP广告接入方式,目前市面上使用最广泛的还是SDK对接,通过使用广告SDK,App开发者可以在App中展示广告商投放的广告,进而根据用户的点击赚取收益。具备一定规模流量、想快速获得收益的APP开发者都会考虑接…

创新实训2024.06.06日志:部署web服务

1. 运行web项目前后端服务 首先我们要先在服务器上运行客户端以及服务端的应用程序。随后再考虑如何通过公网/局域网访问的问题。 如何启动服务在仓库对应分支下的Readme文件中已经有详细描述了。 1.1. 启动服务端 对于服务端,即(要求你在服务端子项…

知了汇智携手数字经济商会,共促物联网鸿蒙产教融合新篇章

5月31日,由成都市数字经济商会主办,华为技术有限公司协办,成都知了汇智科技有限公司及成都市数字经济商会人才专委会共同承办的“产教融合物联网鸿蒙人才交流”大会在成都天府软件园产教融合基地隆重举办。 会议旨在加速四川省鸿蒙技术产业的…

chat4-Server端保存聊天消息到mysql

本文档描述了Server端接收到Client的消息并转发给所有客户端或私发给某个客户端 同时将聊天消息保存到mysql 服务端为当前客户端创建一个线程,此线程接收当前客户端的消息并转发给所有客户端或私发给某个客户端同时将聊天消息保存到mysql 本文档主要总结了将聊天…

VUE3 学习笔记(11):vue-router路由要懂的知识点

在前后端没有分离之前,大家通常采用的MVC模式,由后端通过Controller层实现页面跳转,VUE是组件化的特点,说白了就是一个单页面应用(挂载在public/index.html),意味着所有的页面只是各组件的组合。…

关于按键消抖方法—软件消抖

在设计单片机按键输入的时候,进行按键消抖是防止按键输入被CPU误读多次的必要手段。 一、按键消抖方法(软件) 如果按键较多的情况下,常用软件方法消抖 (1)延时消抖(延时函数按键消抖&#xf…

24 - 查询近30天活跃用户数(高频 SQL 50 题基础版)

24 - 查询近30天活跃用户数 排序和分组 -- 日期相减 date_sub(2019-07-27, interval 30 day)获取新的日期 -- 日期范围 datediff(2019-07-27,activity_date)<30-- where activity_date > date_sub(2019-07-27, interval 30 day) -- and activity_date < 2019-07…

网络编程(八)

网络编程&#xff08;八&#xff09; 数据库数据库的分类基于嵌入式的数据库什么是SQLite?为什么使用SQLite?sqlite3数据库的安装 sqlite3中的点命令.open 数据库文件名字.tables [数据库文件名].schema 表名.database.quit.head on.mode column SQLite数据库中的数据类型SQL…

数据库MongoDB详解

文章目录 入门指南1. 安装 MongoDB2. 启动 MongoDB 服务3. 连接到 MongoDB4. 创建数据库和集合5. CRUD 操作6. 索引7. 备份与恢复 不同场景下的应用方式&#xff1a;应用案例展示 入门指南 MongoDB 是一个基于分布式文件存储的非关系型数据库&#xff08;NoSQL&#xff09;&am…

uniapp3步使用goeasy完成本地消息推送

1.注册登录goeasy&#xff0c;下载测试demo 2.替换demo中main.js中的key 3.打包一个H5&#xff0c;一个自定义基座。 h5发消息&#xff0c;app收消息&#xff0c;然后创建消息通知就好了。记得打开app的消息通知 demo很简单&#xff0c;demo都跑通了&#xff0c;在搬到自己项目…

OZON海关税费是多少,OZON要交关税吗

在跨境电商领域&#xff0c;OZON作为俄罗斯知名的电商平台&#xff0c;吸引了众多国内外商家的目光。然而&#xff0c;当商家考虑在OZON平台上开展业务时&#xff0c;一个不可回避的问题就是海关税费和关税问题。本文将详细探讨OZON海关税费的相关内容&#xff0c;帮助商家更好…

【时间复杂度】定义与计算方法

文章目录 1.什么是时间复杂度&#xff1f;2.时间复杂度类别2.1 常量阶 O(1)2.2 对数阶 O(log n)2.3 线性阶 O(n)2.4 线性对数阶 O(n log n)2.5 平方阶 O(n^2^) 1.什么是时间复杂度&#xff1f; 时间复杂度是计算机科学中用来描述算法执行时间效率的一个概念。它表示了算法执行时…

Python中的“点阵字体”

“点阵字体”是个啥&#xff1f;&#xff0c;在python中怎么使&#xff1f;在现在全面高清的 5 G 5G 5G时代&#xff0c;它还有用“武”之地&#xff1f; (笔记模板由python脚本于2024年06月01日 18:44:31创建&#xff0c;本篇笔记适合会基本编程的coder翻阅) 【学习的细节是欢…

Vue.js 与 TypeScript(1) :项目配置、props标注类型、emits标注类型

像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误&#xff0c;也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全&#xff0c;TypeScript 还改善了开发体验和效率。 一、项目配置 1、在项目中添…

USB (1)

再看USB 其实回过头看USB 是可以和无线 有线(internet) 可以和PCIe 甚至AXI类比的 它们共通处在于都是communication 有限通信 有7层网络协议 在USB也是分层的 不同的协议,依赖的介质不一样 这就要求相应的Physical层处理 USB的physical层是基于Serdes的,所以有串并/并串的…

组装服务器重装linux系统【idrac集成戴尔远程控制卡】

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…

内网安全--隧道技术代理技术

注:本文仅做技术交流,请勿非法破坏... 目录 项目: 1-Ngrok 用法 2-Frp 用法 3-Nps 用法 4-Spp 用法 工具: windows下: Proxifier(推荐~) Sockscap ccproxy Linux下: Proxychains 用法 http://t.csdnimg.cn/88Ew7 隧道技术&#xff1a;解决不出网协议上线的问…

ARM Linux 驱动开发学习之字符设备驱动开发

Linux 中的设备驱动程序是连接硬件设备和操作系统之间的重要桥梁&#xff0c;确保硬件设备能够在操作系统控制下正常工作。在 Linux 中&#xff0c;设备驱动主要分为三大类&#xff1a;字符设备驱动、块设备驱动和网络设备驱动。下面我将详细解释这三类驱动的特点、用途和区别。…