cnd-components-mcp/componentData/components/折叠面板 Collapse.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 简介

折叠面板也称手风琴，常用于展开或收起容器内容区的纵向空间，从而更好的控制页面高度或使页面更简洁。

## 示例

```tsx
import React from 'react';
import { Collapse } from '@alicloud/console-components';

const { Panel } = Collapse;

const titleStyle = {
  margin: '40px 0 4px',
  color: '#1D1D1F',
  height: 20,
};

export default function App() {
  return (
    <div className="App">
      <Collapse defaultExpandedKeys={['2']}>
        <div style={{ ...titleStyle, marginTop: 0 }}>默认</div>
        <Panel title="项目标题" key="1">
          帮助您基于阿里云构建出一个隔离的网络环境，并可以自定义IP
          地址范围、网段、路由表和网关等；此外，也可以通过专线/VPN/GRE等连接方式实现云上VPC与传统IDC的互联，构建混合云业务。
        </Panel>
        <div style={titleStyle}>展开</div>
        <Panel title="项目标题" key="2">
          帮助您基于阿里云构建出一个隔离的网络环境，并可以自定义IP
          地址范围、网段、路由表和网关等；此外，也可以通过专线/VPN/GRE等连接方式实现云上VPC与传统IDC的互联，构建混合云业务。
        </Panel>
        <div style={titleStyle}>禁用</div>
        <Panel title="项目标题" disabled key="3">
          帮助您基于阿里云构建出一个隔离的网络环境，并可以自定义IP
          地址范围、网段、路由表和网关等；此外，也可以通过专线/VPN/GRE等连接方式实现云上VPC与传统IDC的互联，构建混合云业务。
        </Panel>
        <Panel title="项目标题" key="4">
          帮助您基于阿里云构建出一个隔离的网络环境，并可以自定义IP
          地址范围、网段、路由表和网关等；此外，也可以通过专线/VPN/GRE等连接方式实现云上VPC与传统IDC的互联，构建混合云业务。
        </Panel>
      </Collapse>
    </div>
  );
}

export const meta = {
  title: '折叠面板',
  describe:
    'Collapse 接受子组件 Panel 展示信息。Panel 可设置： title（标题）、disable（是否可操作）其中 title 可为字符串或 Component 组件。',
};

```

## API

### Collapse

| 参数                | 说明                         | 类型                                         | 默认值 | 是否必填 |
| ------------------- | ---------------------------- | -------------------------------------------- | ------ | -------- |
| dataSource          | 使用数据模型构建             | Array\<DataItem>                             | -      |          |
| defaultExpandedKeys | 默认展开 keys                | KeyType\[]                                    | -      |          |
| expandedKeys        | 受控展开 keys                | KeyType\[]                                    | -      |          |
| onExpand            | 展开状态发升变化时候的回调   | (expandedKeys: KeyType | KeyType\[]) => void | -      |          |
| disabled            | 所有禁用                     | boolean                                      | -      |          |
| accordion           | 手风琴模式，一次只能打开一个 | boolean                                      | false  |          |

### Collapse.Panel

| 参数       | 说明             | 类型                                                                                               | 默认值 | 是否必填 |
| ---------- | ---------------- | -------------------------------------------------------------------------------------------------- | ------ | -------- |
| disabled   | 是否禁止用户操作 | boolean                                                                                            | -      |          |
| title      | 标题             | React.ReactNode                                                                                    | -      |          |
| isExpanded | 是否展开         | boolean                                                                                            | false  |          |
| onClick    | 点击回调函数     | | ((e: React.MouseEvent\<HTMLElement> | React.KeyboardEvent\<HTMLElement>) => void)<br/> | null | -      |          |