- 单选按钮
🧬 集合组件
单选按钮
Contribute单选按钮
单选按钮是一种选择输入组件，允许用户从预定义选项组中选择一个选项。它显示为一个圆角正方形按钮，用户可以选择或取消选择。 它是一个四舍五入的方形按钮，可以由用户选择或去除选择。 当选择一个单选按钮时，同一组中的所有其他无线单选钮都会自动取消选定。 确保一次只能选择一个选项。 单选按钮通常用于表格、问卷和调查，以帮助用户从选项列表中作出单一选择。
属性
手动选项
手动添加新选项或删除选项，并逐个配置选项。选项的属性如下： 选项的属性如下：
| 属性 | 描述 |
|---|---|
| Label | 显示为选项的文本 |
| Value | 与选项相关联的值 |
| Disabled | 选项是否禁用选择 |
映射选项
您还可以通过将标签和值属性映射到相应的数据字段来添加来自数据源的选项。 您可以通过这种方式动态地从数据库中获取选项。 在本条末尾，我们将展示如何通过一个例子来使用它。
| 属性 | 描述 |
|---|---|
| Data source | 设置选项的数据源 |
| Label | 使用{{item}}设置选项的标签 |
| Value | 使用{{item}}设置选项的值 |
| Disabled | 使用{{item}}设置选项是否禁用选择 |
其他属性
| 属性 | 描述 |
|---|---|
| Default value | 组件的初始值。 您可以通过在{{}}中键入JavaScript动态更改初始值。 |
| Placeholder | 当输入字段为空时，将显示该值。 |
| Label | 用户显示的字段名称 |
| Caption | 用于详细描述字段的标题 |
| Hidden label | 设置是否显示标签 |
| Position | 设置标签相对于组件的位置 |
| Alignment | 设置标签的对齐方式 |
| Width | 当标签在组件的左侧时，设置标签的宽度比 |
| Event Handler | 在响应组件事件时触发查询、控制组件或调用其他API。 |
| 禁用 | 控制组件是否被禁用的状态。 控制组件是否禁用的状态。当禁用时，无法修改或聚焦组件。 |
| Read Only | 控制组件是否为只读状态。 一个只读组件可以被选择和集中，但不能被修改。 |
| 显示清除按钮 | 设置是否显示清除按钮 |
| 工具提示 | 用户可以在此输入组件工具提示。 工具提示将在其焦点时显示。 支持Markdown 格式。 |
| 必填字段 | 仅在开关打开时有效。 |
| 自定义规则 | editor.inspect.setter_tooltip.custom_rule |
| 隐藏验证消息 | 您可以通过切换隐藏状态来隐藏错误消息，当输入值不正确时。您可以通过JavaScript动态更改隐藏状态。 您可以用JavaScript动态地更改隐藏状态。 |
| 表单数据键 | 构造数据属性时指定包装表单组件的键。 |
| 隐藏 | 动态控制组件是否隐藏。 您可以通过动态布尔值更改隐藏状态。 |
| 主题颜色 | 选择组件的主题颜色 |
方法
您可以使用其他组件来控制组件。 我们支持以下三种方法：
设置值
设置所选选项，例如{{”value1”}}
| 属性 | 描述 |
|---|---|
| 值 | 所选选项的值。 |
清除值
清除所选选项
validate
验证输入信息是否合法
清除验证
清除验证消息
事件处理器
我们支持监听单选按钮组件的onChange事件。
当所选选项更改时，它可以触发指定的动作。 意味着当用户从单选按钮中选择不同的选项时，可以基于所选选项采取特定的操作。 例如，以一种网页形式出现。 选择一个不同的选项可以触发不同表单字段的显示或提交表单到另一个目的地。 这样，用户选择的选项可以影响他们正在使用的软件或网络应用程序的行为。 根据用户输入触发特定行动的能力是交互式软件设计的一个重要方面，可以提高软件的可用性和功能。
数据
组件具有一些常用数据，可以通过{{componentName.propertyName}}在应用程序中调用。
| 属性名称 | 描述 |
|---|---|
| 值 | 所选选项的值的字符串 |
使用案例
接下来，我们将演示如何使用映射模式动态获取选项。
第1步 添加一个Action
我们创建了一个叫做selection的表格，包括5列：options_en、options_jp、options_zh、options_kr、value。 我们将选项值存储在value中，并将不同语言的选项标签存储在其他列中。
创建一个名为postgresql1的操作以列出selection中的所有数据
select * from selection
第2步 配置组件
将数据源设置为
{{postgresql1.data}}配置标签以根据语言更改标签。
- 使用{{ item.columnName }}设置列。
- 使用{{ currentUserInfo.language }}设置用户在ILLA中使用的语言。
{{currentUserInfo.language=='ja-JP' ? item.options_jp : currentUserInfo.language == 'ko-KR' ? item.options_kr : currentUserInfo.language == 'zh-CN' ? item.options_zh : item.options_en }}
