大家好,我是robbin。往期介绍和学习文章如下:
1.关于嵌套
懂html的都知道iframe。还有vue、react、amis这类高低代码框架,也大量涉及组件嵌套、json嵌套。
总言之,嵌套在软件开发中(尤其是前端),极为重要!
UIOTOS以无代码的方式,实现了页面之间的无限嵌套。这也是不写一行代码,实现复杂前端应用的关键技术。
2. 容器组件
除了单纯的嵌套容器,Tab页签、对话框、滚动页、菜单等组件,这里也属于容器。
原则:显示内容通用,任意由其他页面决定。
UIOTOS容器类型的组件
容器组件的共同点:
编辑时双击,能进入内嵌页。
进入内嵌页后,空白处双击,回到上页。
都有页面路径属性,用于填入内嵌页地址(Tab页签、菜单容器稍特殊)。
差异点将分别展开:
① 嵌套容器
“我只管尺寸和布局,内容不管,嵌套谁显示谁!”
UIOTOS常规嵌套容器
属性说明:
页面路径:填入内嵌页面。如何找页面路径?
https://www.yuque.com/liuhuo-nc809/uiotos/vsvucqlf51xt2l9p#NXnQL
② Tab页签容器
“我只管切换,每页内容嵌套的谁,就显示谁!”。常与按钮组搭配。
UIOTOS页签组件
属性说明:
相对路径:页签多页共同目录的路径。
多页设置:各页面的名称(可省去后缀)。页面路径属性配置可省。
当前索引:当前切换显示哪个页面。
③ 对话框容器
“我只管弹窗,内容不管,嵌套谁显示谁!”
UIOTOS对话框组件
属性说明:
页面路径:填入内嵌页面。
弹窗:勾选时,打开对话框(连线操作时,不关联属性,等同勾选)。
④ 滚动页容器
“我只管超过范围就滚动,内容不管,嵌套谁显示谁!”
UIOTOS滚动页容器组件
属性说明:
页面路径:填入内嵌页面。
自动填充宽度
内容最小宽度:通常不用设置,默认即可。此时,当容器组件宽度,小于内嵌页面宽度时,水平方向将滚动显示。
⑤ 菜单容器
“我只管侧边菜单栏,内容区域不管,菜单设置谁就显示谁!”
UIOTOS菜单容器组件
属性说明:
页面路径:通常只用于设置默认页。
数据内容:JSON结构,用来配置菜单树结构,name字段为菜单文字,display字段为对应的内嵌页路径,点击时内容区域切换加载。
小结
容器嵌套功能十分强大!
复杂的前端应用,可以层层拆解,模块化搭建。跟代码增量化、渐进式开发,以及面向对象思想,极为类似。
而整个过程无限嵌套、属性继承和重写,无需任何代码开发。
下期将介绍多层嵌套,涉及的属性继承,以及重写。
关于
UIOTOS是一款“神奇”的前端工具,拥有页面嵌套独家技术,支持无代码编程,一站式搭建后台管理、上位机HMI、大屏组态等各类IoT应用。
UIOTOS 集成 NodeRed = 工控设备上位机
UIOTOS 集成 APIJSON = CRUD业务系统
UIOTOS 集成 物联网平台 = IoT平台上层应用
产品咨询
点击阅读全文,查看文档,了解更多。