Morpheme

Appearance

Collapse ​

Toggle the visibility of content across your project with VCollapse component.

Usage ​

Basic Usage ​

You can use the VCollapse component in your template like so:

The isOpen variable in the v-model directive controls whether the collapsible is open or closed.

Expanded List ​

Here's an example how to create expanded list with VCollapse component.

Accordion ​

Here's an example how to create accordion list with VCollapse component.

Props ​

NameTypeDefault
showBooleanfalse
duration[Number, Object]300
transitionString'ease-in-out'

Events ​

None

Slots ​

Default slot ​

The default slot allows you to add content to the panel element. This is the content that will be revealed or hidden when the collapsible is opened or closed.

CSS Variables ​

None

Standalone Installation ​

You can also install the Collapsible component individually via @morpheme/collapsible package:

bash
npm i @morpheme/collapsible
npm i @morpheme/collapsible
vue
<script setup lang="ts">
import {VCollapse} from '@morpheme/collapsible';
</script>

<template>
  <VBtn @click="isOpen = !isOpen"> Toggle </VBtn>
  <VCollapse :show="isOpen">
    Anim eiusmod ea nostrud do incididunt consequat duis adipisicing
    reprehenderit nisi. Minim mollit eiusmod incididunt fugiat ipsum velit ut
    consequat est consectetur adipisicing. Nulla duis anim velit magna aute nisi
    elit nulla deserunt. Fugiat consequat ut magna eiusmod sit incididunt qui.
    Incididunt velit fugiat sunt sint amet magna est laborum excepteur. Aute
    aliqua nisi est nulla voluptate enim qui amet labore et consectetur. Est
    pariatur qui amet cupidatat magna est adipisicing quis ea ea.
  </VCollapse>
</template>
<script setup lang="ts">
import {VCollapse} from '@morpheme/collapsible';
</script>

<template>
  <VBtn @click="isOpen = !isOpen"> Toggle </VBtn>
  <VCollapse :show="isOpen">
    Anim eiusmod ea nostrud do incididunt consequat duis adipisicing
    reprehenderit nisi. Minim mollit eiusmod incididunt fugiat ipsum velit ut
    consequat est consectetur adipisicing. Nulla duis anim velit magna aute nisi
    elit nulla deserunt. Fugiat consequat ut magna eiusmod sit incididunt qui.
    Incididunt velit fugiat sunt sint amet magna est laborum excepteur. Aute
    aliqua nisi est nulla voluptate enim qui amet labore et consectetur. Est
    pariatur qui amet cupidatat magna est adipisicing quis ea ea.
  </VCollapse>
</template>

Storybook ​

View Storybook documentation here.