| Name | Type | Default | Description |
|---|---|---|---|
as | ElementType | | HTML tag or React Component to render the component as. |
children | ReactNode | | Content to expand/collapse. |
className | string | | Additional CSS classes. |
collapsed | boolean | false
| If true,the content will be hidden. |
dimension | 'height' |'width' | "height"
| Used to determine the transition property. |
forwardedAs | ElementType | | HTML tag or React Component to finally render the component as. |
max | string | | Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. |
min | string | | Minimum height/width to collapse to. This will set the starting collapsed size as well. |
nullWhenCollapsed | boolean | false
| If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level. |
onAfterCollapse | () => void | | Callback fired after content collapsed. |
onAfterExpand | () => void | | Callback fired after content expanded. |
onBeforeCollapse | () => void | | Callback fired before content collapsed. |
onBeforeExpand | () => void | | Callback fired before content expanded. |
transitionSpeed | string | "0.25s"
| Determine the speed of animation. This value comes from theme.base.animation.speed. |
ExpandCollapse
The ExpandCollapse component can be wrapped around any content that should be hidden or shown depending on state. When the component is collapsed, its children will be hidden and the surrounding content will pull in to fill the empty space. If you would like to expand and collapse content without pushing and pulling the surrounding elements, try using the Drawer component.
For more information on how to use the features and props for this component, check out the developer documentation.
Usage
The ExpandCollapse component can be opened along either dimension (height or width) by setting the dimension prop. In addition, min and max props are provided to control the limits on how far the component may expand or collapse.
You can control how quickly the component expands and collapses by by passing a CSS time value to transitionSpeed, which is a string containing any positive number directly followed by 's' or 'ms'. If you would like no transition, pass 0 the to transitionSpeed prop. Callback functions are provided to allow for event handling before and after the component expands and collapses.