0.0.8 • Published 9 months ago

@kunukn/vue-collapse v0.0.8

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

Vue Collapse

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

npm version npm downloads gzip license

vue-collapse

logo

Demo

Tiny library

namesizegzip
vue-collapse.css0.37 kB0.20 kB
vue-collapse.js2.11 kB0.91 kB
vue-collapse.umd.cjs1.72 kB0.88 kB

CSS required

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

import '@kunukn/vue-collapse/style' // this imports the vue-collapse.css file.

or CDN

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

or manually copy the content from the vue-collapse.css file to your app.

To alter the timing, you can use the transition prop. or add a custom CSS.

<style>
[data-vue-collapse-transition] {
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

Supported versions

Vue 3

Install

npm install @kunukn/vue-collapse

Import

import '@kunukn/vue-collapse/style'
import { VueCollapse } from '@kunukn/vue-collapse'

Attribute options

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

AttributeTypeDefaultAbout
:whenbooleanfalsyshould component collapse?
:asstringdivelement type to render
transitionstringfalsyapply custom CSS transition, see demo example below
@collapse()functionevent emitted with component in this state
@collapsing()functionevent emitted with component in this state
@expanded()functionevent emitted with component in this state
@expanding()functionevent emitted with component in this state
@event(state)functionevent emitted with one of the 4 states
@init(state)functioncomponent mount event emitted with current state

Usage examples

<template>
  <div class="app">
    <button
      @click="isCollapsed = !isCollapsed"
      :aria-expanded="!isCollapsed"
      aria-controls="my-description"
    >
      {{ display }}
    </button>

    <VueCollapse
      id="my-description"
      :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>
    </VueCollapse>
  </div>
</template>

<script setup>
import { VueCollapse } 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-duration: 200ms;
  transition-timing-function: 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
0.0.8

9 months ago

0.0.7

9 months ago

0.0.6

9 months ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago