Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

collapse

v1.0.0arrow_drop_down
v1.0.0
STATUS
Passing
DOWNLOADS
314
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
9 months ago
SIZE
6 KB
1 contributor
Use collapse in your project ?
Copied
npm i @bit/react-bootstrap.react-bootstrap.collapse
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDefault valueDescription
in
boolfalse

Show the component; triggers the expand or collapse animation

mountOnEnter
boolfalse

Wait until the first “enter” transition to mount the component (add it to the DOM)

unmountOnExit
boolfalse

Unmount the component (remove it from the DOM) when it is collapsed

appear
boolfalse

Run the expand animation when the component mounts, if it is initially shown

timeout
number300

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 .width CSS class.

getDimensionValue
functionfunction 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