Skip to content
On this page

Collapse

The ACollapse component is used to easily toggle visibility of almost any content on your pages in a vertically collapsing container. Includes support for making accordions.

Import

js
import { ACollapse } from 'ayovue'
import 'ayovue/themes/default/collapse.css'

Examples

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum nisi cum asperiores magni blanditiis nostrum, nesciunt fuga ex mollitia veritatis aut dolorum ea! Cumque itaque perspiciatis culpa iste deleniti illo.

View Codes
vue
<template>
  <AButton @click="opened = !opened">Show / Hide</AButton>
  <ACollapse :open="opened">
    <p class="my-p">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum nisi cum asperiores magni
      blanditiis nostrum, nesciunt fuga ex mollitia veritatis aut dolorum ea! Cumque itaque
      perspiciatis culpa iste deleniti illo.
    </p>
  </ACollapse>
</template>

Props

Collapse component has the following props.

Prop nameTypeRequiredDefault valueDetails
openBooleanNofalseTo show or hide a section

Slots

Collapse component has the following slots.

Slot nameDescriptionProps
defaultCollapsed ContentN/A

Released under the MIT License.