🧬 组装组件
什么是开关？
切换组件是一个用户界面元素，允许用户在两个状态之间切换：“on”和“off”。
属性
| 属性 | 描述 |
|---|---|
| 默认值 | 组件的初始值。 您可以在 {{}} 中输入JavaScript 动态更改初始值。 |
| 标签 | 显示给用户的字段名称 |
| 标题 | 详细描述字段的标题 |
| 隐藏标签 | 设置是否显示标签 |
| 位置 | 设置标签相对于组件的位置 |
| 对齐 | 设置标签对齐 |
| 事件处理程序 | 响应组件事件触发查询、控制组件或调用其他API。 |
| 正在加载 | 组件是否应显示加载指示器。 |
| 已禁用 | 控制组件是否被禁用的状态。 当组件被禁用时，它不能被修改或聚焦。 |
| 工具提示 | 用户可以在此输入组件提示。 工具提示将在其焦点时显示。 支持Markdown 格式。 |
| Hidden | 动态控制组件是否隐藏。 您可以通过动态布尔值更改隐藏状态。 |
| 主题颜色 | 允许用户指定按钮的背景颜色和不透明度 |
方法
您可以使用其他组件来控制组件。 我们支持以下三种方法：
- setValue
要设置选中的值，例如 {{‘value1’}}
| 属性 | 描述 |
|---|---|
| 值 | 选定的值 |
- clearValue
清除选中的值
- 切换
将开关从“off”状态改为“on”状态，反之亦然。
示例用法：
切换组件支持使用内置事件系统监听其他组件的onClick事件。 通过跟随这些示例步骤设置它：
- 将事件触发器添加到您想要听到的组件中。 例如，如果你想要聆听按钮组件的
onClick事件, 你会给该按钮组件添加一个事件触发器。 - 在编辑事件处理器中，选择
控制组件在动作中，选择你想要更新的Switch组件作为事件的目标。 - 选择
toggle动作。 当事件触发(当按钮被点击时)，切换开关组件并更新其状态。 - 保存事件触发器设置并重复您想要听到的任何其他组件的过程。
一旦您设置了事件触发器，在其他组件触发onClick` 事件时，开关组件将自动更新。 这允许您创建实时响应用户输入的动态接口 让用户更容易浏览和与您的应用程序交互。
事件处理程序
| 事件 | 描述 |
|---|---|
| 更改 | 当用户更改选中的选项值时，执行用户定制的特定操作。 |
数据
按钮组件有一些常用的数据，可以通过应用程序中的 {{componentName.propertyName}} 调用。
| 属性名称 | 描述 |
|---|---|
| 颜色方案 | 按钮的背景颜色 |
| 显示名称 | 此组件的名称 (如按钮1) |
| hidden | 布尔值表示按钮的隐藏状态 |
| 标签 | 标签值 |
| 标签对齐 | 切换标签对齐(向左或向右) |
| 标签位置 | 切换标签的位置(左侧或右侧) |
| 标签宽度 | 代表标签宽度的整数。 |
| 标签已满 | 一个布尔值表示标签是否满。 |
| 值 | 用户设置为 true 或 false |
使用大小写
接下来，我们将展示如何动态切换其他组件的状态。
步骤 1 添加组件
首先，我们添加 Switch 组件，并将其标为“隐藏”。 然后我们使用 text 组件作为一个受影响的组件，从’显示到’隐藏状态。 我们将其内容更改为 ‘Hello World’
步骤 2 配置组件
在 Hidden 文本属性。 点击 fx 图标来控制组件的隐藏状态，使用JavaScript设置它和我们的开关值相同：
{{switch1.value}}现在，每当开启开关时，开关的值为 true ，文本将被隐藏，反之亦然。
切换 开启
切换 Off
