# Collapse 组件文档 > **注意**: 本组件为 UI 组件,必须通过 Manager(如 `PropertyPanelManager`)封装后使用,不可直接在业务代码中实例化。 ## 1. 组件概述 `BimCollapse` 是一个通用的折叠面板组件,支持手风琴模式、自定义内容和标题。常用于属性面板、设置菜单等场景。 ## 2. API 参考 ### 2.1 配置项 `CollapseOptions` ```typescript interface CollapseOptions { container: HTMLElement | string; // 挂载容器 items: CollapseItemConfig[]; // 面板项列表 accordion?: boolean; // 是否开启手风琴模式 (默认 false) activeIds?: string[]; // 初始展开的 ID 列表 bordered?: boolean; // 是否显示边框 (默认 true) ghost?: boolean; // 是否幽灵模式 (默认 false) className?: string; // 自定义类名 onChange?: (activeIds: string[]) => void; // 切换回调 } ``` ### 2.2 面板项配置 `CollapseItemConfig` ```typescript interface CollapseItemConfig { id: string; // 唯一标识 title: string; // 标题翻译键 (例如 'panel.base') content: string | HTMLElement; // 内容 icon?: string; // 标题图标 (SVG) extra?: string | HTMLElement; // 标题右侧额外内容 disabled?: boolean; // 是否禁用 className?: string; // 自定义类名 } ``` ### 2.3 方法 * `toggleItem(id: string)`: 切换指定面板的展开/折叠状态。 * `setLocales()`: 更新组件文本(通常自动调用)。 * `destroy()`: 销毁组件。 ## 3. 使用示例 (在 Manager 中) ```typescript import { BimCollapse } from '../components/collapse/index'; // 在 Manager 的方法中 const collapse = new BimCollapse({ container: this.containerElement, accordion: true, items: [ { id: 'item1', title: 'my.title.key', // 翻译键 content: '