设置UI引擎前端页面折叠面板组件属性
折叠面板组件是一种用于组织和展示大量信息的容器控件，通过折叠/展开机制有效管理界面空间。适用于海量结构化信息的分层展示，可将设备参数、运维记录、工艺规程、生产报表等多类工业信息分类收纳，有效节省页面空间、保持界面整洁，尤其适配操作台、数据看板等工业前端界面的信息组织需求（如按产线/设备类型分类展示参数、按时间维度分类展示运维记录）。
前提条件
已在当前页面添加“折叠面板”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“折叠面板”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础信息
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
折叠项设置 |
管理折叠面板的子项，支持新增、编辑、删除、排序、切换当前折叠项操作。具体操作请参见折叠项设置管理。 |
否 |
|
是否为手风琴模式 |
启用后，折叠面板将展示手风琴效果。仅允许同时展开一个子项，适用于需要单一展示内容的场景。 关闭后，可展开多个子项。 |
是 |
折叠项设置管理
|
操作类型 |
操作步骤 |
|---|---|
|
新增折叠项 |
单击“添加折叠项”，系统自动生成新的折叠项。 新增后建议立即编辑名称（如“产线A - 空压机参数”），以避免默认名称导致后期管理混乱。 |
|
编辑折叠项名称 |
|
|
删除折叠项 |
单击目标折叠项所在行的 删除前请确认折叠项内无关键数据（如设备故障记录、工艺规程），建议先备份内容再执行删除操作。 |
|
排序折叠项 |
|
|
切换当前折叠项 |
单击目标折叠项所在行的
|
折叠项内容管理
系统默认自动展开第一个折叠项，并在画布中会显示对应的内容插槽区域，允许用户为每个折叠项独立配置专属的展示内容，实现分模块、分类型的信息组织与管理。
如需为指定折叠项添加内容，请按照以下步骤操作：
- 在“折叠项设置”中，单击选中目标折叠项的名称。例如，需要为“产线A - 空压机参数”添加内容，则选中该折叠项。
- 将需要展示的组件（如表格、数字卡片、图表）从“物料”插件面板中拖动至画布中的插槽占位区域，完成内容添加。
- 如果需要为其他折叠项添加内容，请重复上述步骤，确保每个折叠项的内容准确对应。
其他
如下属性适用于UI引擎所有组件，用于精细化控制。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
元素id值 |
对应HTML标签的“id”属性，同一页面内必须唯一。 |
是 |
|
样式类 |
对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 |
是 |
|
ref引用类 |
对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
