Show · Collapse
Display content areas can be expanded or folded.
How to import
You can expand multiple panels at the same time, and use
defaultActiveKey to set the panel to expand by default.
accordion to restrict one panel only to be expanded at one time.
disabled to disabled panel.
Hide The Panel Icon
showArrow to hide the panel icon.
You can use
expandIcon to set the expanding icon and
collapseIcon for folded icon.
Custom Extra Content on the Right-upper Corner
You can use
extra to set extra content on the right-upper corner.
Only works when
header is string. If
header is a ReactNode, it will take the entire header part including extra so that you could render whatever you need.
|Controlled property, key of the currently expanded panel
|string | string
|className of Collapse
|Click Header to expand and collapse, otherwise only respond to click arrow
|Custom collapsing icons
|Key of the expanded panel when initialized
|string | string
|Custom expanding icon
|Whether to keep the hidden panel in DOM tree, destroyed by default
|Toggle whether to have animation
|Expand icon position
|Inline CSS style
|Callback function when switching panel
|function(activeKey: string | string, e: event)
|className of Panel
|If true, the panel is disabled
|Custom rendering of the auxiliary content in the upper right-hand corner of each panel(only work when header is string)
|Panel head content
|Required and must be unique, used to match
|Animation end callback
|() => void
|When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering.
|string | number
|whether to show arrows icon
|inline CSS style
- The button on the right side of the panel header is set to
- The interactive part of the panel header is set to the
aria-ownsvalue corresponding to the panel content
- The content of the panel is set with
aria-hidden, and its value is automatically switched between true and false with the display of the panel content
- The panel
aria-disabledis synchronized with the
disabledproperty, indicating that the panel is disabled
The essence of the folding panel is that the card container adds the function of folding and unfolding, so the copywriting specification of the folding panel needs to be the same as the Card copywriting specification
Why is the data in Form cleared when using Collapse?When Collapse is collapsed, the related DOM is destroyed and so are the fields data stored in Form. You could set
keepDOM=trueto keep the DOM from being destroyed.
Collapse.Header as a whole is used as a click hot zone for folding and expanding. If a custom element (such as Input) is placed in the Header, it will cause Collapse to collapse/expand when clicked. How to avoid it?You can prevent the event from bubbling to Collapse.Header in the onClick event callback of the custom element. If the custom element does not provide an event object, wrap a layer of div to prevent bubbling in the div onClick.