vue-collapse-it

0.1.4 • Public • Published

vue-collapse-it

Vue directive to expand/collapse elements.

Install

yarn add vue-collapse-it

Browser

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

Demo

Codepen

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.

Usage

Import the plugin in your main.js file

import VCollapse from 'vue-collapse-it'

const app = createApp(App)
// use the plugin
app.use(VCollapse)
// or you can set your default options
app.use(VCollapse, {
  directive: '',
  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>

Readme

Keywords

none

Package Sidebar

Install

npm i vue-collapse-it

Weekly Downloads

3

Version

0.1.4

License

none

Unpacked Size

22 kB

Total Files

20

Last publish

Collaborators

  • dgknca