Collapse
Note
- Transition components may not work in Yard it only show the props you can use with it. Feel free to playaround with this component in live editor.
Examples
Basic usage
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem consequuntur libero laborum voluptatum deleniti aut perspiciatis illum velit. Placeat magnam quae odio ab in at, aut deserunt minima sed cupiditate.
Basic width usage
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem consequuntur libero laborum voluptatum deleniti aut perspiciatis illum velit. Placeat magnam quae odio ab in at, aut deserunt minima sed cupiditate.
Dropdown usage
Show More Content
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem consequuntur libero laborum voluptatum deleniti aut perspiciatis illum velit. Placeat magnam quae odio ab in at, aut deserunt minima sed cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem consequuntur libero laborum voluptatum deleniti aut perspiciatis illum velit. Placeat magnam quae odio ab in at, aut deserunt minima sed cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem consequuntur libero laborum voluptatum deleniti aut perspiciatis illum velit. Placeat magnam quae odio ab in at, aut deserunt minima sed cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem consequuntur libero laborum voluptatum deleniti aut perspiciatis illum velit. Placeat magnam quae odio ab in at, aut deserunt minima sed cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem consequuntur libero laborum voluptatum deleniti aut perspiciatis illum velit. Placeat magnam quae odio ab in at, aut deserunt minima sed cupiditate.
Accordian usage
What sprinklr actually does
Quam Mollis nibh cum ornare montes nulla diam ultricies venenatis. Justo parturient cubilia, habitasse eu gravida convallis quis in egestas mollis neque vel aliquam facilisi per curabitur libero ante rhoncus. Congue natoque amet. Bibendum in varius risus convallis hac at vehicula. Praesent rutrum. Posuere senectus ultrices ut etiam vitae. Mauris.What is the future of AI
Quam Mollis nibh cum ornare montes nulla diam ultricies venenatis. Justo parturient cubilia, habitasse eu gravida convallis quis in egestas mollis neque vel aliquam facilisi per curabitur libero ante rhoncus. Congue natoque amet. Bibendum in varius risus convallis hac at vehicula. Praesent rutrum. Posuere senectus ultrices ut etiam vitae. Mauris.Is chat GPT a game changer
Quam Mollis nibh cum ornare montes nulla diam ultricies venenatis. Justo parturient cubilia, habitasse eu gravida convallis quis in egestas mollis neque vel aliquam facilisi per curabitur libero ante rhoncus. Congue natoque amet. Bibendum in varius risus convallis hac at vehicula. Praesent rutrum. Posuere senectus ultrices ut etiam vitae. Mauris.Best career options in today's world
Quam Mollis nibh cum ornare montes nulla diam ultricies venenatis. Justo parturient cubilia, habitasse eu gravida convallis quis in egestas mollis neque vel aliquam facilisi per curabitur libero ante rhoncus. Congue natoque amet. Bibendum in varius risus convallis hac at vehicula. Praesent rutrum. Posuere senectus ultrices ut etiam vitae. Mauris.
API
Collapse props
| Name | Type | Default | Description |
|---|---|---|---|
children | react node | Children for collapsing | |
collapsedSize | number | 0 | The width (horizontal) or height (vertical) of the container when collapsed. Will default to 0 when unmountOnExit is true |
containerRef | ref | A ref to access an container element. | |
dimension | 'height'| 'width' | height | Direction of collapse in component (Keep width fixed for width dimension to work Collapse component needs to decide what will be the width of the component to know till what size it need to exapand ) |
disableEnterTransition | boolean | false | Flag to allow the entering transition |
disableExitTransition | boolean | false | Flag to allow the exiting transition |
duration | number | 300 | Duration of animation |
enableAppearTransition | boolean | false | Flag to allow the component mount transition for the first time |
mountOnEnter | boolean | false | Flag to decide that the component should mount on th first tranition |
onEnter | function | Function called just before starting the animation. | |
onEntered | function | Function called after animation. | |
onEntering | function | Function called just at the starting animation. | |
onExit | function | Function called just before the Exit animation | |
onExited | function | Function called after the Exited animation | |
onExiting | function | Function called at the Exiting animation. | |
overrides | custom | Lets you customize all aspects of the component. | |
timingFunction | 'ease'| 'linear'| 'ease-in'| 'ease-out' | ease | Describes the timing function |
unmountOnExit | boolean | false | The component should unmount of the exiting transition |
visible | boolean | true | Renders component in checked state. |
You can check the implementation of the component for more details.
Collapse exports
You can import this module like so:
import {Collapse} from 'spaceweb/transitions/collapse'
It exports the following components or utility functions:
- Collapse