70 lines
2.3 KiB
Markdown
70 lines
2.3 KiB
Markdown
|
# 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: '<div>Content Here</div>'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 4. 国际化
|
|||
|
|
|
|||
|
|
组件会自动订阅 `localeManager`。
|
|||
|
|
* **标题**: `config.title` 必须是翻译键。
|
|||
|
|
* **内容**: 如果内容包含文本，请确保内容生成时已翻译，或内容本身具有响应国际化的能力。
|