Show · Collapsible
Collapsible
The collapsible component is a container component used to put long sections of information under a block that can be expanded or collapsed.
When to use
Collapsible
is 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
Collapsible
to 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
id
props, the value passed in will be set as the id of the wrapper element, which can be used with other components'aria-controls
to indicate the control relationship, see the usage example below.
FAQ
- Why Collapsible does not expand as expected?
Check if the display of parent item ofCollapsible
once was set tonone
. In this case,Collapsible
could not get height of node properly. If this is not the issue, contact Semi developers to see if other issues exist.