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
Collapsibleis a behavior component with animation effect by default. It is used in various components in Semi Components, including: Navigation, Collapse, Tree, TreeSelect, and Typography.
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
import { Collapsible } from '@douyinfe/semi-ui';
Basic Usage
Use isOpen to control the expansion or folding of the content.
import React, { useState } from 'react';
import { Collapsible, Button } from '@douyinfe/semi-ui';
() => {
const [isOpen, setOpen] = useState();
const toggle = () => {
setOpen(!isOpen);
};
const collapsed = (
<ul>
<li>Nothing can ever happen twice.</li>
<li>In consequence, the sorry fact is</li>
<li>that we arrive here improvised</li>
<li>and leave without the chance to practice. </li>
</ul>
);
return (
<div>
<Button onClick={toggle}>Toggle</Button>
<Collapsible isOpen={isOpen}>{collapsed}</Collapsible>
</div>
);
};
Custom Animation Duration
You can use duration to set animation duration or turn off animation by setting motion={false}.
Whether to adapt to content height when content height is less than collapseHeight. When true, the collapsed height is Math.min(content height, collapseHeight)
boolean
false
2.77.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
lazyRender
Used with keepDOM, when true, the component will not be rendered when mounting
boolean
false
2.54
motion
Toggle whether to turn on animation
Motion
true
-
onMotionEnd
Animation end callback
() => void
-
-
reCalcKey
When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering.
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.
Why Collapsible does not expand as expected? Check if the display of parent item of Collapsible once was set to none. 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.