# Collapse 折叠面板

### 介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

### 引入

```js
import { Collapse } from 'rc-ui-lib';
```

## 代码演示

### 基础用法

通过 `initValue` 控制展开的面板列表，`initValue` 为数组格式。

```js
const initValue = ['1'];
```

```jsx
<Collapse initValue={initValue}>
  <Collapse.Item title="标题1" name="1">
    内容
  </Collapse.Item>
  <Collapse.Item title="标题2" name="2">
    内容
  </Collapse.Item>
  <Collapse.Item title="标题3" name="3">
    内容
  </Collapse.Item>
</Collapse>
```

### 手风琴

通过 `accordion` 可以设置为手风琴模式，最多展开一个面板，此时 `initValue` 为字符串格式。

```jsx
<Collapse initValue="1" accordion>
  <Collapse.Item title="标题1" name="1">
    内容
  </Collapse.Item>
  <Collapse.Item title="标题2" name="2">
    内容
  </Collapse.Item>
  <Collapse.Item title="标题3" name="3">
    内容
  </Collapse.Item>
</Collapse>
```

### 禁用状态

通过 `disabled` 属性来禁用单个面板。

```jsx
<Collapse initValue="initValue">
  <Collapse.Item title="标题1" name="1">
    内容
  </Collapse.Item>
  <Collapse.Item title="标题2" name="2" disabled>
    内容
  </Collapse.Item>
  <Collapse.Item title="标题3" name="3" disabled>
    内容
  </Collapse.Item>
</Collapse>
```

### 自定义标题内容

通过 `title` 插槽可以自定义标题栏的内容。

```jsx
<Collapse initValue="initValue">
  <Collapse.Item
    name="1"
    title={
      <div>
        标题1 <Icon name="question-o" />
      </div>
    }
  >
    内容
  </Collapse.Item>
  <Collapse.Item title="标题2" name="2" icon="shop-o">
    内容
  </Collapse.Item>
</Collapse>
```

## API

### Collapse Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| initValue | 默认打开的面板 name | 手风琴模式：_number \| string_<br/>非手风琴模式：_(number \| string)[]_ | - |
| value | 当前展开面板的 name | _number \| string_ \| _(number \| string)[]_ | - |
| accordion | 是否开启手风琴模式 | _boolean_ | `false` |
| border | 是否显示外边框 | _boolean_ | `true` |

### Collapse Events

| 事件名   | 说明           | 回调参数                                 |
| -------- | -------------- | ---------------------------------------- |
| onChange | 切换面板时触发 | initValue: 类型与 initValue 绑定的值一致 |

### CollapseItem Props

| 参数       | 说明                                 | 类型                | 默认值  |
| ---------- | ------------------------------------ | ------------------- | ------- |
| name       | 唯一标识符，默认为索引值             | _number \| string_  | `index` |
| icon       | 标题栏左侧图标                       | _string\|ReactNode_ | -       |
| size       | 标题栏大小，可选值为 `large`         | _string_            | -       |
| title      | 标题栏左侧内容                       | _number \| string_  | -       |
| value      | 标题栏右侧内容                       | _number \| string_  | -       |
| label      | 标题栏描述信息                       | _number \| string_  | -       |
| border     | 是否显示内边框                       | _boolean_           | `true`  |
| isLink     | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_           | `true`  |
| disabled   | 是否禁用面板                         | _boolean_           | `false` |
| titleClass | 左侧标题额外类名                     | _string_            | -       |
| valueClass | 右侧内容额外类名                     | _string_            | -       |
| labelClass | 描述信息额外类名                     | _string_            | -       |

### CollapseItem 方法

通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。

| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
| toggle | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - |

### 类型定义

组件导出以下类型定义：

```js
import type { CollapseItemInstance } from 'rc-ui-lib';
```

`CollapseItemInstance` 是组件实例的类型，用法如下：

```js
import { useRef } from 'react';
import type { CollapseItemInstance } from 'rc-ui-lib';

const collapseItemRef = useRef<CollapseItemInstance>();

collapseItemRef.current?.toggle();
```

## 主题定制

### 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

| 名称                                        | 默认值                                      | 描述 |
| ------------------------------------------- | ------------------------------------------- | ---- |
| --rc-collapse-item-transition-duration      | _var(--rc-animation-duration-base)_         | -    |
| --rc-collapse-item-content-padding          | _var(--rc-padding-sm) var(--rc-padding-md)_ | -    |
| --rc-collapse-item-content-font-size        | _var(--rc-font-size-md)_                    | -    |
| --rc-collapse-item-content-line-height      | _1.5_                                       | -    |
| --rc-collapse-item-content-text-color       | _var(--rc-gray-6)_                          | -    |
| --rc-collapse-item-content-background-color | _var(--rc-white)_                           | -    |
| --rc-collapse-item-title-disabled-color     | _var(--rc-gray-5)_                          | -    |
