字段集

1. 组件概述

字段集是一个表单布局组件，用于将多个相关的表单项归类到一个分组中。它提供一个带标题的容器，可以将表单项按逻辑分组展示，并支持折叠/展开功能。当表单内容较多时，使用字段集可以让页面结构更清晰，用户更容易找到需要填写的内容。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 写作助手的参数配置。在一个 AI 写作应用中，需要收集多种配置信息（如写作风格、字数要求、目标读者等）。可以使用字段集将”基础设置”和”高级设置”分开，开启折叠功能，让用户先关注基础配置，需要时再展开高级设置。
• 场景二：学生信息采集表单。在教育类应用中收集学生信息时，可以用字段集将”个人信息”、“联系方式”、“学习偏好”等分组展示。每个分组有清晰的标题，方便学生按类别填写，也便于后续查看和管理。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
标题	字段集的分组标题，显示在顶部。用于说明这一组表单项的用途，如”基本信息”、“联系方式”等。
是否可折叠	开启后，用户可以点击标题来折叠或展开字段集的内容区域。适用于内容较多、希望用户按需查看的场景。关闭时，内容始终展开显示。
默认是否折叠	仅在开启”是否可折叠”后显示。设置字段集初始加载时是折叠还是展开状态。如果希望用户先关注其他内容，可以设置为默认折叠。

设计

样式折叠组

配置项	说明
控件样式	设置字段集的整体尺寸风格，影响内边距和标题大小。可选：默认、极小、小、正常、大、超大。根据页面整体风格和内容多少选择合适的尺寸。
标题 CSS 类名	为标题区域添加自定义样式类名，用于进一步调整标题的外观。适合有特殊样式需求的场景。
内容区域 CSS 类名	为内容区域添加自定义样式类名，用于调整表单项容器的外观。
添加子表单项	点击此按钮可以打开组件面板，从中选择表单项添加到字段集内部。
子表单展示模式	设置字段集内部表单项的排列方式。可选：继承（使用父级表单的设置）、正常（标题在上，输入框在下）、内联（标题和输入框在同一行，紧凑排列）、水平（标题在左，输入框在右，按比例分配宽度）。
子表单水平占比设置	仅在子表单展示模式为”水平”时显示。可选择”继承”父级设置，或切换为”自定义”来单独设置字段集内表单项的标题与输入框的宽度比例。