| Name | Type | Default value | Description |
|---|---|---|---|
in | bool | false | Show the component; triggers the expand or collapse animation |
mountOnEnter | bool | false | Wait until the first “enter” transition to mount the component (add it to the DOM) |
unmountOnExit | bool | false | Unmount the component (remove it from the DOM) when it is collapsed |
appear | bool | false | Run the expand animation when the component mounts, if it is initially shown |
timeout | number | 300 | Duration of the collapse animation in milliseconds, to ensure that finishing callbacks are fired even if the original browser transition end events are canceled |
onEnter | function | Callback fired before the component expands | |
onEntering | function | Callback fired after the component starts to expand | |
onEntered | function | Callback fired after the component has expanded | |
onExit | function | Callback fired before the component collapses | |
onExiting | function | Callback fired after the component starts to collapse | |
onExited | function | Callback fired after the component has collapsed | |
dimension | 'height' | 'width' | function | 'height' | The dimension used when collapsing, or a function that returns the dimension Note: Bootstrap only partially supports 'width’!
You will need to supply your own CSS animation for the |
getDimensionValue | function | function getDimensionValue(dimension, elem) {
let offset = `offset${dimension[0].toUpperCase()}${dimension.slice(1)}`;
let value = elem[offset];
let margins = MARGINS[dimension];
return (
value +
parseInt(css(elem, margins[0]), 10) +
parseInt(css(elem, margins[1]), 10)
);
} | element.offsetWidth | element.offsetHeight |
role | string | ARIA role of collapsible element |