# 手风琴组件

一个灵活且可定制的手风琴组件，用于可折叠的内容区域。

## 功能特性

- **可折叠区域**: 可展开和折叠的内容面板
- **两种模式**: 
  - **多选模式**: 多个面板可以同时打开
  - **独占模式**: 同时只能打开一个面板
- **动态内容**: 支持任何Svelte组件作为面板内容
- **自定义标题**: 可选的自定义标题组件
- **响应式设计**: 紧凑模式适配小屏幕
- **无障碍访问**: 基于无障碍最佳实践构建

## 基本用法

```svelte
<script>
import Accordion, { type AccordionItem } from '@ticatec/uniface-element/Accordion';
import MyComponent from './MyComponent.svelte';

const accordionItems: AccordionItem[] = [
  {
    title: '第一部分',
    component: MyComponent,
    params: { data: '示例数据' }
  },
  {
    title: '第二部分', 
    component: MyComponent,
    params: { data: '另一个示例' }
  }
];
</script>

<Accordion accordions={accordionItems} />
```

## 属性参数

| 属性 | 类型 | 默认值 | 描述 |
|------|------|---------|-------------|
| `accordions` | `AccordionItem[]` | `[]` | 要显示的手风琴项目数组 |
| `exclusive` | `boolean` | `false` | 是否同时只能打开一个面板 |
| `activeItem` | `AccordionItem` | `null` | 当前激活的项目（在独占模式下使用） |
| `compact` | `boolean` | `false` | 启用紧凑样式以适配小屏幕 |
| `style` | `string` | `''` | 自定义CSS样式 |
| `class` | `string` | `''` | 额外的CSS类名 |

## AccordionItem 接口

```typescript
interface AccordionItem {
  title: string;        // 手风琴标题的显示文本
  component: any;       // 要在面板中渲染的Svelte组件
  params?: any;         // 传递给组件的属性参数
}
```

## 使用示例

### 多面板模式（默认）

```svelte
<Accordion accordions={items} />
```

### 独占模式（只能打开一个）

```svelte
<Accordion 
  accordions={items} 
  exclusive={true}
  bind:activeItem={currentActive}
/>
```

### 紧凑模式

```svelte
<Accordion 
  accordions={items} 
  compact={true}
/>
```

### 自定义样式

```svelte
<Accordion 
  accordions={items}
  style="border: 1px solid #ccc; border-radius: 8px;"
  class="my-custom-accordion"
/>
```

## 行为特性

### 多选模式
- 用户可以展开/折叠任意数量的面板
- 点击面板标题切换其打开/关闭状态
- 不会自动关闭其他面板

### 独占模式
- 同时只能打开一个面板
- 打开新面板会自动关闭之前打开的面板
- 如果没有指定`activeItem`，首个面板会在挂载时自动打开
- 为当前打开的面板显示文件夹图标

## 样式定制

组件使用以下CSS类名：

- `.uniface-accordion-panel` - 主容器
- `.accordion` - 单个手风琴项目
- `.header` - 手风琴标题（可点击）
- `.content` - 手风琴内容区域
- `.compact` - 启用紧凑模式时应用

## 无障碍访问

- 标题可点击，支持键盘导航
- 为屏幕阅读器提供适当的ARIA属性
- 为打开/关闭状态提供视觉指示器
- 为键盘用户提供焦点管理

## 图标使用

组件使用Google Material图标：
- `icon_google_keyboard_arrow_down` - 折叠状态（多选模式）
- `icon_google_keyboard_arrow_up` - 展开状态（多选模式）  
- `icon_google_folder_open` - 激活状态（独占模式）

## 高级用法

### 自定义标题组件

你可以通过在AccordionItemView上设置`header`属性来提供自定义标题组件：

```svelte
<AccordionItemView 
  title={item.title}
  isOpen={isOpen}
  header={CustomHeaderComponent}
  onClick={handleClick}
>
  <!-- 内容 -->
</AccordionItemView>
```

### 动态内容

手风琴项目可以包含任何带有动态参数的Svelte组件：

```javascript
const dynamicItems = [
  {
    title: '用户资料',
    component: UserProfile,
    params: { userId: 123, editable: true }
  },
  {
    title: '设置',
    component: SettingsPanel,
    params: { theme: 'dark', language: 'zh-CN' }
  }
];
```

## 注意事项

- 确保传递给组件的参数与目标组件的属性接口匹配
- 在独占模式下，建议监听`activeItem`的变化以响应用户交互
- 组件内容会在面板展开时渲染，折叠时从DOM中移除
- 适合用于FAQ、设置面板、内容分类等场景