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