> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/collapse.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Collapse 折叠面板

展开或收起一组内容。

## 基础用法


自由展开

项目介绍

Leaf Garden 的项目信息。

设置

已归档

手风琴 · 紧凑尺寸

项目介绍

设置

已归档

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/collapse/basic.tsx"
import type { CollapseItem } from '@ifhover/leaf-ui';

import { Collapse, Flex, Input, Space, Text } from '@ifhover/leaf-ui';

const items: CollapseItem[] = [
  { key: 'about', label: '项目介绍', children: <p>Leaf Garden 的项目信息。</p> },
  {
    key: 'settings',
    label: '设置',
    children: <Input aria-label="项目名称" placeholder="输入后折叠，内容会保留" />,
  },
  { key: 'archived', label: '已归档', children: null, disabled: true },
];

export function CollapseBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>自由展开</Text>
        <Collapse items={items} defaultActiveKey="about" />
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>手风琴 · 紧凑尺寸</Text>
        <Collapse items={items} accordion size="sm" />
      </Flex>
    </Space>
  );
}
```

展开代码

## Collapse API

| 属性                             | 类型                                         | 默认值     | 说明            |
| ------------------------------ | ------------------------------------------ | ------- | ------------- |
| `items`                        | [`readonly CollapseItem[]`](#collapseitem) | 必填      | 面板列表          |
| `activeKey / defaultActiveKey` | `string \| readonly string[]`              | `[]`    | 受控展开项 / 初始展开项 |
| `onChange`                     | `(keys: string[]) => void`                 | —       | 展开项变化         |
| `accordion`                    | `boolean`                                  | `false` | 同时只展开一个面板     |
| `bordered`                     | `boolean`                                  | `true`  | 显示边框          |
| `size`                         | `'sm' \| 'md' \| 'lg'`                     | `'md'`  | 标题尺寸          |
| `destroyInactive`              | `boolean`                                  | `false` | 收起后销毁内容       |

### CollapseItem

| 属性                 | 类型          | 默认值     | 说明        |
| ------------------ | ----------- | ------- | --------- |
| `key`              | `string`    | 必填      | 唯一标识      |
| `label / children` | `ReactNode` | 必填      | 标题 / 面板内容 |
| `disabled`         | `boolean`   | `false` | 禁止切换该面板   |
| `extra`            | `ReactNode` | —       | 标题旁的内容    |

## 类型

定义组件属性或组装列表时可导入相关类型。

```ts
import type { CollapseProps, CollapseItem } from '@ifhover/leaf-ui';
```

## 使用说明

访问过的内容默认保留。方向键、Home 和 End 在标题之间移动，Enter 或空格展开。extra 中的操作不会触发展开。