cnd-components-mcp/componentData/components/Collapse/examples.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 组件。',
};

```