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