Collapse

The Collapse component is used to create regions of content that can expand/collapse with a basic animation. It helps to hide content that's not immediately relevant to the user.

This component leverages animejs, and composes the Box component.

Import#

import { CCollapse } from '@chakra-ui/vue';

Usage#

Basic Usage#

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Editable Example

<template> <div> <c-button mb="4" variant-color="blue" @click="show = !show"> Toggle </c-button> <c-collapse :is-open="show"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </c-collapse> </div> </template> <script> export default { data () { return { show: false } } } </script>

Changing the startingHeight#

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Editable Example

<template> <div> <c-button mb="4" variant-color="blue" @click="show = !show"> Show {{ show ? 'Less' : 'More' }} </c-button> <c-collapse :starting-height="20" :is-open="show"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </c-collapse> </div> </template> <script> export default { data () { return { show: false } } } </script>

Props#

This component doesn't have any custom props.

Name	Type	Description
isOpen	`boolean`	If `true`, the content will be visible
animateOpacity	`boolean`	If `true`, the opacity of the content will be animated
duration	`number`	The animation duration as it expands
startingHeight	`number`	The height you want the content in it's collapsed state. Set to `0` by default
endingHeight	`number`	The height you want the content in it's expanded state. Set to `auto` by default
easing	`string`	Add easing function for entering and leaving state. Accepts easing props from animejs. Set to `easeInOutSine` by default.

Events#

Name	Payload	Description
`@start`	`Event`	The event to be called when the collapse animation starts.
`@finish`	`Event`	The event to be called when the collapse animation ends.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!