Collapse
Introduction
The Collapse
element shows and hides content with a built-in slide in/out animation.
You might use this to create a panel of settings for your application, with sub-sections
that can be expanded and collapsed.
The below information is a snippet from the
related section in the Blueprint reference documentation.
Examples
I am an open Collapse component. Edit the code to change my state.
Usage
Collapse
is stateless — whether it is open or closed is determined by the isOpen
prop. The following example shows how to combine it with a Button
to control its state.
API Reference
Collapse
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
component | false | React.ReactType | Component to render as the root element. Useful when rendering a `Collapse` inside a `<table>`, for instance. |
isOpen | false | boolean | Whether the component is open or closed. |
keepChildrenMounted | false | boolean | Whether the child components will remain mounted when the `Collapse` is closed. Setting to true may improve performance by avoiding re-mounting children. |
transitionDuration | false | number | The length of time the transition takes, in milliseconds. This must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length. |
Related Reading
Blueprint Reference