Collapse
The content area that can be collapsed/expanded.
Install
npm install @arco-design/web-react@2.66.18
Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.
Examples
- Basic: Collapse is used to group and hide complex content areas. You can decide which panels to be expanded.
- Accordion: Render as Accordion.
- Nested Panels: Nested panels.
- Borderless Panel: Pass in
bordered=falseto use simple style without borders. - Custom Panel Style: Use
styleto customize style of panel. - Extra Node: The extra node on the far right can be set by
extra. - Position of IconExpand: The position of the
expandIconcan be set throughexpandIconPosition. - Lazyload: Whether to render
childrenuntil the first expansion ofCollapse.Item. - Destroy On Hide: The collapsed panel can be destroyed through the
destroyOnHideproperty. - Specify Folding Trigger Area: Through the
triggerRegion, set the region that can trigger collapsing.
Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.
API
Collapse
| Property | Description | Type | DefaultValue | Version |
|---|---|---|---|---|
| accordion | Whether to render as Accordion | boolean | - | - |
| bordered | Whether to render border | boolean | true | - |
| destroyOnHide | If true, panels will be unmounted on collapsing | boolean | - | - |
| lazyload | If true, invisible panels will not be rendered on mount | boolean | true | - |
| expandIconPosition | Position of collapse icon | 'left' | 'right' | left | - |
| triggerRegion | The area that can trigger the collapse operation | 'header' | 'icon' | - | 2.41.0 |
| expandIcon | Custom collapse icon | ReactNode | - | - |
| activeKey | Key of the active panel | string | string[] | - | - |
| className | Additional css class | string | string[] | - | - |
| defaultActiveKey | Key of the default active panel | string | string[] | - | - |
| style | Additional style | CSSProperties | - | - |
| onChange | Callback when the active panel changes | (key: string, keys: string[], e) => void | - | - |
Collapse.Item
| Property | Description | Type | DefaultValue | Version |
|---|---|---|---|---|
| destroyOnHide | If true, item will be unmounted on collapsing. (Higher priority than Collapse.destroyOnHide) | boolean | - | - |
| disabled | If true, the panel is not collapsible | boolean | - | - |
| showExpandIcon | Whether to show expand icon | boolean | true | - |
| name | Unique identifier key of the current panel item | string (Required) | - | - |
| expandIcon | Custom expand icon | ReactNode | - | - |
| extra | The extra element in the corner | ReactNode | - | - |
| header | Header content | ReactNode | - | - |
| className | Additional css class | string | string[] | - | - |
| contentStyle | Additional styles of the content area. | CSSProperties | - | 2.15.0 |
| style | Additional style | CSSProperties | - | - |