Collapse
A content area that can be collapsed/expanded.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
A content area that can be collapsed/expanded.
When to Use
- Group and hide complex areas to keep pages tidy.
- An accordion is a special type of accordion panel that only allows a single content area to expand.
Demos
Collapse
Props
| Name | Description | Type | Default |
|---|---|---|---|
| accordion | Whether to enable accordion mode | boolean | false |
| activeKey | The key of the currently expanded panel | accordion mode: string | null <br/>non-accordion mode: string[] | - |
| arrowIcon | Custom arrow icon. if you pass a ReactNode, antd-mobile will add a rotate animation for you. | React.ReactNode | ((active: boolean) => React.ReactNode) | - |
| defaultActiveKey | The key of the expanded panel by default | accordion mode: string | null <br/>non-accordion mode: string[] | - |
| onChange | Triggered when the panel is switched | accordion mode: (activeKey: string | null) => void <br /> non-accordion mode: (activeKey: string[]) => void | - |
Collapse.Panel
Props
| Name | Description | Type | Default |
|---|---|---|---|
| arrowIcon | Custom arrow icon | React.ReactNode | ((active: boolean) => React.ReactNode) | - |
| destroyOnClose | Destroy dom when not visible | boolean | false |
| disabled | Whether disabled or not | boolean | false |
| forceRender | Whether to render the DOM structure when hidden | boolean | false |
| key | The unique identifier | string | - |
| onClick | The click event of title bar | (event: React.MouseEvent<Element, MouseEvent>) => void | - |
| title | The content on the left side of the title bar | ReactNode | - |