UIOTOS 示例5：扩展按钮（图标可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等

目标

继续上一个示例，现在选择另一个组件封装，继续熟悉扩展组件功能的新方法。
UIOTOS的表单组件中，缺少可自定义图标的开关按钮，即分别任意设置开、关两种状态的图标。已有的是这些：

• 普通按钮：可点击。文字/图标+文字外观。
• 开关按钮：可切换。滑动开关外观。
• 图片按钮：贴图可点击。图片外观。
• 按钮组：多项切换。文字和颜色外观。

本示例对图片按钮封装为图标可设置的开关按钮，与示例4中普通按钮封装文字切换稍有区别，效果如下：

步骤

内嵌页封装图片按钮组件，主页面测试使用。步骤分别如下：

内嵌页

与示例4的1内嵌页类似。这里是图片按钮点击切换，而不是普通按钮。组件的摆放位置略有区别，实现方式和逻辑与前者一致。

新建

略。参见1新建。内嵌页命名为"自行实现的切换开关"。

拖放组件

拖入相关组件并设置。

• 步骤1：拖入输入框组件和基本数学计算、透明传递函数。
  • 设置透明传递的输入组如下所示：

• 数学计算的设置可参考示例4中的步骤2。
• 步骤2：拖入图片按钮（面板中组件-表单）。

设置外观-图标路径为表单属性。（什么是表单属性，有什么用处？）

完整步骤：

连线操作

步骤1：按钮点击，触发函数执行。参见示例4的步骤1。

步骤2：函数取反，回写给输入。参见示例4的步骤2。

步骤3：取设置图片，给到按钮。参见示例4的步骤3（这里设置和传递图片路径，非按钮文字）。

步骤4：步骤2输出给步骤3，触发执行。参见示例4的步骤4。

布局

实现经嵌套后，仅图片按钮可见。参见示例4中的布局。

主页面

新建

略。参见1新建。命名为"自行实现的切换开关"。

拖放组件

依次拖入输入框、嵌套容器、按钮组件，并进行属性设置。步骤如下：

• 步骤1：拖入嵌套容器（面板中组件-容器），设置外观-去掉勾选开启阴影。
• 步骤2：拖入输入框（面板中组件-表单）。
• 步骤3：拖入两个普通按钮V2（面板中组件-表单），分别设置：外观-文字（开、关）。

页面嵌套

将内嵌页嵌套在上一步拖放的容器组件（操作参见容器嵌套），如下所示：

属性继承

参见连线-高级篇属性继承。本示例只用到内嵌页输入框的值内容筛选指定继承这些即可。如下所示：

连线操作

步骤1：按钮开和关，分别传固定的1和0，给到输入框（值内容）。通过输入框中转一下，只为方便显示过程值，可以省去。主要看步骤2。（参见解析赋值的常数赋值）

**步骤2： **双向关联上层和内嵌两个输入框。值内容（主页面输入框）←→ 值内容（内嵌页输入框）

注意：这里容器对外连线，直接用到内嵌属性，需勾选用内嵌事件，否则不会触发。也可以通过关联内嵌输入框的事件，解析赋值提取属性值。（参考解析赋值）

附加布局选中全部组件，横纵方向中心布局。

小结：

• 与示例4类似，这里作为巩固。
• 示例4是对普通按钮的文字作切换配置，这里是对图片按钮的图标路径。实际上，任何组件的任何属性，都可以进行类似改造。