折叠面板 Collapse
可以折叠/展开的内容区域。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
可以折叠/展开的内容区域。
何时使用
- 对复杂区域进行分组和隐藏，保持页面的整洁。
- 手风琴是一种特殊的折叠面板，只允许单个内容区域展开。
示例
Collapse
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| accordion | 是否开启手风琴模式 | boolean | false |
| activeKey | 当前展开面板的 key | 手风琴模式：string | null <br/>非手风琴模式：string[] | - |
| arrowIcon | 自定义箭头图标，如果是 ReactNode，那么 antd-mobile 会自动为你增加旋转动画效果 | ReactNode | ((active: boolean) => React.ReactNode) | - |
| defaultActiveKey | 默认展开面板的 key | 手风琴模式：string | null <br/>非手风琴模式：string[] | - |
| onChange | 切换面板时触发 | 手风琴模式：(activeKey: string | null) => void <br /> 非手风琴模式：(activeKey: string[]) => void | - |
Collapse.Panel
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| arrowIcon | 自定义箭头图标 | ReactNode | ((active: boolean) => React.ReactNode) | - |
| destroyOnClose | 不可见时是否销毁 DOM 结构 | boolean | false |
| disabled | 是否为禁用状态 | boolean | false |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| key | 唯一标识符 | string | - |
| onClick | 标题栏的点击事件 | (event: React.MouseEvent<Element, MouseEvent>) => void | - |
| title | 标题栏左侧内容 | ReactNode | - |