collapse.mdx

import SEO from "../components/SEO";

Collapse

The Collapse component is used to create regions of content that can expand/collapse with a simple 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

<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

<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.