When to use
Collapsibleis a behavior component with animation effect by default. It is used in various components in Semi Components, including:Navigation,Collapse,Tree,TreeSelect, andTypography.- When the above components do not meet requirements or customized collapsed behavior, you can use
Collapsibleto put in contents that need to be expanded or folded.
Demos
How to import
Basic Usage
Use
isOpen to control the expansion or folding of the content.Custom Animation Duration
You can use
duration to set animation duration or turn off animation by setting motion={false}.Nested use
Custom CollapseHeight
You could use
collapseHeight to customize collapsed height. v>=1.0.0API reference
| Properties | Instructions | type | Default | version |
|---|---|---|---|---|
| className | Class name | string | - | 0.34.0 |
| collapseHeight | Collapse height | number | 0 | 1.0.0 |
| duration | Time of animation execution | number | 250 | - |
| isOpen | Toggle whether to expand the content area | boolean | false | - |
| keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default | boolean | false | 0.25.0 |
| motion | Toggle whether to turn on animation | Motion | true | - |
| reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | number | string | - | 1.5.0 |
| style | Style object | CSSProperties | - | 0.34.0 |
| aria-controls | aria-controls | string | - | 2.3.0 |
Accessibility
ARIA
- Collapsible has
idprops, the value passed in will be set as the id of the wrapper element, which can be used with other components'aria-controlsto indicate the control relationship, see the usage example below.
FAQ
- Why Collapsible does not expand as expected?
Check if the display of parent item ofCollapsibleonce was set tonone. In this case,Collapsiblecould not get height of node properly. If this is not the issue, contact Semi developers to see if other issues exist.
