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

  • 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

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.0

API reference

PropertiesInstructionstypeDefaultversion
classNameClass namestring-0.34.0
collapseHeightCollapse heightnumber01.0.0
durationTime of animation executionnumber250-
isOpenToggle whether to expand the content areabooleanfalse-
keepDOMWhether to keep the hidden panel in DOM tree, destroyed by defaultbooleanfalse0.25.0
motionToggle whether to turn on animationMotiontrue-
reCalcKeyWhen reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering.number | string-1.5.0
styleStyle objectCSSProperties-0.34.0
aria-controlsaria-controlsstring-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 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.

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED