When to use
Collapsibleis a behavior component with animation effect by default. It is used in various components in Semi Components, including:
- 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.
How to import
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
You could use
collapseHeight to customize collapsed height. v>=1.0.0
|Time of animation execution
|Toggle whether to expand the content area
|Whether to keep the hidden panel in DOM tree, destroyed by default
|Toggle whether to turn on animation
|Animation end callback
|() => void
|When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering.
|number | string
- 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.
- Why Collapsible does not expand as expected?
Check if the display of parent item of
Collapsibleonce was set to
none. 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.