- 单选组（Radio group）
🧬 集合组件
单选组（Radio group）
Contribute单选组
单选框组，也称为单选组或单选框组，是一种组件，允许用户从预定义的选项列表中选择一个选项。 组中的每个选项由一个圆形按钮表示，用户可以选择或取消选择该按钮。 当选择一个选项时，组中先前选择的选项会自动取消选择。
单选框组通常用于Web表单，对话框和其他交互式应用程序中，用户需要从一组选项中进行单个选择。 它们有助于防止用户错误或混淆选择多个选项时可能发生的错误。 此外，单选按钮组易于使用和视觉直观，使它们成为设计师和开发人员的热门选择。
属性
手动选项
手动添加新选项或删除选项，并逐个配置选项。 选项的属性如下：
| 属性 | 描述 |
|---|---|
| 标签 | 选项的显示文本 |
| 值 | 与选项关联的价值 |
| 禁用 | 选项是否被禁用选择 |
映射选项
您还可以通过将标签和值属性映射到相应的数据字段来从数据源添加选项。 您可以通过此方式动态地从数据库获取选项。 在本文结尾，我们将通过一个示例演示如何使用它。
| 属性 | 描述 |
|---|---|
| 数据源 | 设置选项的数据源 |
| 标签 | 使用{{item}}设置选项的标签 |
| 值 | 使用{{item}}设置选项的值 |
| 禁用 | 使用{{item}}设置选项是否禁用选择 |
其他属性
| 属性 | 描述 |
|---|---|
| 默认值 | 组件的初始值。 您可以通过在{{}}中输入JavaScript来动态更改初始值。 |
| 占位符 | 输入字段为空时将显示该值。 |
| 标签 | 显示给用户的字段名称 |
| 标题 | 用于详细描述字段的说明 |
| 隐藏标签 | 设置是否显示标签 |
| 位置 | 设置标签相对于组件的位置 |
| 对齐 | 设置标签的对齐方式 |
| 宽度 | 当标签位于组件的左侧时，设置标签的宽度比例 |
| 事件处理程序 | 响应组件事件触发查询，控制组件或调用其他API。 |
| 禁用 | 控制组件是否被禁用的状态。 当禁用时，无法修改或聚焦组件。 |
| 只读 | 控制组件是否为只读状态。 只读组件可以被选择和聚焦，但不能被修改。 |
| 显示清除按钮 | 设置是否显示清除按钮 |
| 工具提示 | 用户可以在此输入组件工具提示。 工具提示将在其焦点时显示。 支持Markdown 格式。 |
| 必填字段 | 仅在开关打开时有效。 |
| 自定义规则 | editor.inspect.setter_tooltip.custom_rule |
| 隐藏验证消息 | 当输入值不正确时，可以通过切换隐藏状态来隐藏错误消息。 您可以通过JavaScript动态更改隐藏状态。 |
| 表单数据键 | 构造数据属性时指定包装表单组件的键。 |
| 隐藏 | 动态控制组件是否隐藏。 您可以通过动态布尔值更改隐藏状态。 |
| 主题颜色 | 选择组件的主题颜色 |
方法
您可以使用其他组件来控制组件。 我们支持以下三种方法：
设置值
设置所选选项，例如{{“value1”}}
| 属性 | 描述 |
|---|---|
| 值 | 选定的值 |
清除值
清除所选选项
validate
验证输入信息是否合法
清除验证
清除验证消息
事件处理程序
我们支持侦听单选框组的onChange事件。
当所选选项更改时，它可以触发指定的动作。 意味着当用户从单选框组中选择不同的选项时，可以基于所选选项采取特定的操作。 例如，在Web表单中，选择不同的选项可以触发显示不同的表单字段或将表单提交到不同的目标。 通过这种方式，用户选择的选项可以影响他们使用的软件或Web应用程序的行为。 基于用户输入触发指定操作的能力是交互式软件设计的重要方面，可以提高软件的可用性和功能性。
数据
该组件具有一些常用数据，可以通过{{componentName.propertyName}}在应用程序中调用。
| 属性名称 | 描述 |
|---|---|
| 值 | 选定的值 |
用例
接下来，我们将演示如何使用映射模式动态获取选项。
第1步 添加操作
我们创建了一个名为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 }}
