复选框
1. 组件概述
Section titled “1. 组件概述”复选框是一个数据输入组件,用于在多个选项中进行多选。它以复选框列表的形式展示所有可选项,用户可以同时勾选多个选项。复选框适用于需要用户从预设选项中选择多个值的场景,例如选择感兴趣的学科领域、勾选需要的功能模块、配置多个标签等。
加载中...
查看 JSON
复制 JSON
2. 应用场景示例
Section titled “2. 应用场景示例”- 场景一:学习偏好收集。在 AI 学习助手应用中,让学生勾选感兴趣的学科(如数学、物理、化学、生物等),系统根据选择推荐相应的学习资源。配置选项数据为各学科名称,开启”可全选”方便用户快速选择所有学科。
- 场景二:AI 功能模块选择。在智能写作助手中,让用户选择需要启用的辅助功能(如语法检查、风格优化、查重检测、格式调整等)。用户勾选后点击按钮触发工作流,工作流根据选中的功能模块执行相应的处理逻辑。
加载中...
查看 JSON
复制 JSON
3. 功能配置
Section titled “3. 功能配置”| 配置项 | 说明 |
|---|---|
| 绑定变量 | 组件的变量名,用户选中的值会以此变量名存储。其他组件可以绑定此变量来获取选中的值,调用工作流时此变量的值也会传递给工作流。 |
| 标题 | 复选框组左侧显示的标签文字,用于说明该选择项的用途,如”兴趣领域”、“功能模块”。 |
| 可全选 | 开启后,在选项列表顶部显示一个”全选”复选框,用户点击可一次性选中或取消所有选项。适用于选项较多且用户可能需要全选的场景。开启后可进一步配置: - 默认全选:页面加载时自动选中所有选项 - 全选文本:自定义全选复选框的显示文字,默认为”全选” |
| 拼接值 | 开启后,将选中的多个选项值用连接符拼接成一个字符串。例如选中”A”和”B”,拼接后的值为”A,B”。关闭后,值以数组形式存储。 |
| 拼接符 | 当开启”拼接值”时显示。设置多个值之间的连接符号,默认为英文逗号”,“。 |
| 仅提取值 | 当关闭”拼接值”时显示。开启后,变量值为选中项的 value 组成的数组(如 [“A”, “B”]);关闭后,变量值为完整选项对象组成的数组(包含 label、value 等所有字段)。 |
| 标题提示 | 在标题旁边显示一个小问号图标,鼠标悬停时弹出提示内容。适合放置简短的帮助说明。 |
| 控件提示 | 在复选框组旁边显示一个小问号图标,鼠标悬停时弹出提示内容。 |
| 描述 | 显示在复选框组下方的浅色说明文字,用于补充解释该配置项的用途或填写要求。 |
| 配置项 | 说明 |
|---|---|
| 数据 | 配置复选框的选项列表。可以手动添加静态选项(每个选项包含显示文本和对应值),也可以通过接口动态获取选项数据。 |
| 默认值 | 当选项数据来源于接口时显示。设置组件的初始选中值,可以设置为静态值或绑定变量。 |
| 选项模板 | 自定义每个选项的显示内容。默认只显示选项的文本,通过模板可以展示更丰富的内容,如添加图标、描述等。 |
| 可创建 | 开启后,用户可以在运行时新增选项。适用于选项需要动态扩展的场景。 |
| 可编辑 | 开启后,用户可以在运行时编辑已有选项。 |
| 可删除 | 开启后,用户可以在运行时删除选项。 |
| 配置项 | 说明 |
|---|---|
| 添加事件 | 支持”值变化”事件,当用户勾选或取消勾选选项时触发。常见用途:根据选中的选项动态显示或隐藏其他组件,或在选择完成后自动调用工作流进行处理。 |
表单项折叠组
Section titled “表单项折叠组”| 配置项 | 说明 |
|---|---|
| 一行选项显示 | 开启后,所有选项在同一行内水平排列;关闭后,选项垂直排列,每行显示指定数量的选项。默认开启。 |
| 每行选项个数 | 当关闭”一行选项显示”时显示。设置每行显示的选项数量,范围 1-6,默认为 1(即每行一个选项,垂直排列)。 |
| 模式 | 选项的视觉样式。可选: - 默认:标准复选框样式,左侧显示勾选框 - 按钮:选项以按钮形式展示,选中时按钮高亮,视觉效果更突出 |
| 配置项 | 说明 |
|---|---|
| 可见 | 控制组件是否显示。可以设置为始终可见,或根据条件动态控制。 |
| 隐藏 | 控制组件是否隐藏。与”可见”相反。 |
| 禁用 | 控制组件是否禁用(变灰且不可操作)。可以设置为始终禁用,或根据条件动态控制。例如在用户未完成前置步骤时禁用选择。 |
| 静态展示 | 开启后,复选框变为只读的纯文本展示模式,只显示已选中的选项,不可编辑。适用于详情页或确认页面。 |
| 配置项 | 说明 |
|---|---|
| 必填 | 开启后,用户必须至少选择一个选项才能提交表单。 |
| 最少选择个数 | 限制用户至少需要选择的选项数量。 |
| 最多选择个数 | 限制用户最多可以选择的选项数量。 |