Skip to content

A super simple Vue 3 directive to expand/collapse elements.

License

Notifications You must be signed in to change notification settings

dgknca/v-collapse-it

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021
Sep 29, 2021

Repository files navigation

v-collapse-it

A super simple Vue 3 directive to expand/collapse elements.

Install

yarn add v-collapse-it

Browser

<!-- From CDN -->
<script src="https://unpkg.com/v-collapse-it@0.1.0/dist/v-collapse-it.umd.js"></script>

Demo

Codepen | Codesandbox Accordion Example

Options

Option Type Default Description
directive string 'collapse' Name of the directive (v-collapse).
speed number 300 Transition duration in miliseconds.
collapsed boolean false Collapse state of elements used the directive.
ease Ease 'easeInOutCubic' A string indicating which easing function to use for the transition.

Ease Type

export type Ease =
  | 'linear'
  | 'easeInQuad'
  | 'easeOutQuad'
  | 'easeInOutQuad'
  | 'easeInCubic'
  | 'easeOutCubic'
  | 'easeInOutCubic'
  | 'easeInQuart'
  | 'easeOutQuart'
  | 'easeInOutQuart'
  | 'easeInQuint'
  | 'easeOutQuint'
  | 'easeInOutQuint'

Usage

Import the plugin in your main.js file

import VCollapse from 'v-collapse-it'

const app = createApp(App)
// use the plugin
app.use(VCollapse)
// or you can set your default options
app.use(VCollapse, {
  speed: 500,
})
app.mount('#app')

Example usage:

<template>
  <div>
    <!-- you can directly use a single boolean value like this -->
    <div v-collapse="isCollapsed" class="box"></div>

    <!-- or use an object witrh available configs -->
    <div
      v-collapse="{
        speed: 1000,
        collapsed: isCollapsed,
      }"
      class="box"
    ></div>

    <button @click="toggle">toggle</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isCollapsed = ref(false)

    const toggle = () => {
      isCollapsed.value = !isCollapsed.value
    }

    return {
      isCollapsed,
      toggle,
    }
  },
}
</script>

<style scoped>
.box {
  height: 300px;
  width: 300px;
  background: pink;
  padding: 50px;
  margin: 50px;
}
</style>