@kunukn/vue-collapse v0.0.5

Vue Collapse

Collapsible component with CSS transition for elements with variable and dynamic height.

vue-collapse

Demo

Tiny library

CSS required

:warning: ️You need to add the CSS file.

import "@kunukn/vue-collapse/dist/vue-collapse.css"

or CDN

<link
  rel="stylesheet"
  href="https://unpkg.com/@kunukn/vue-collapse/dist/vue-collapse.css"
/>

Supported versions

Vue 3

Install

npm install @kunukn/vue-collapse

Import

import "@kunukn/vue-collapse/dist/vue-collapse.css";
import { VueCollapse } from "@kunukn/vue-collapse";

Attribute options

There are four possible states: collapsed, collapsing, expanded, expanding.

Usage example

Simple

<template>
  <div class="app">
    <button @click="isCollapsed = !isCollapsed">{{ display }}</button>

    <section class="section">
      <Collapse :when="isCollapsed" @event="onEvent" v-slot="{ state }">
        <p class="long-text">
          I know the state: {{ state }}. Lorem Ipsum is simply dummy text of the
          printing and typesetting industry.
        </p>
      </Collapse>
    </section>
  </div>
</template>

<script setup>
import { VueCollapse as Collapse } from "@kunukn/vue-collapse";
import { ref } from "vue";

const isCollapsed = ref(false);
const display = ref("");

const onEvent = (state) => {
  display.value = "event " + state;
};
</script>

<style>
/* Custom easing */
.vue-collapse[data-vue-collapse-transition] {
  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

CDN

https://unpkg.com/@kunukn/vue-collapse/

Supported browsers

Modern browsers that can CSS transition on grid-template-rows.

Design goals

• Minimal in file size
• Let the browser handle the animation using CSS transition
• Minimalistic API
• Flexible - provide your own markup, styling and easing
• Interruptible - can be reversed during movement
• Inert - when collapsed you should tab over the collapsed component
• Availability - from CDN or npm install
• Collapsible on height only