vue-slide-toggle

Vue component for like jQuery slideUp / slideDown animations

Demo

Install

Via Yarn:

yarn add vue-slide-toggle

Via NPM:

npm i vue-slide-toggle

Add plugin into your app

import Vue from 'vue'
import VueSlideToggle from 'vue-slide-toggle'
 
Vue.use(VueSlideToggle)
 
// or component
 
import { VueSlideToggle } from 'vue-slide-toggle'
 
export default {
  components: {
    VueSlideToggle
  }
}

Browser

Include vue-slide-toggle in the page

<!-- unpkg -->
<script src="https://unpkg.com/vue-slide-toggle"></script>
<!-- or jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/vue-slide-toggle"></script>

If Vue is detected in the Page, the plugin is installed automatically.

Usage

<template>
  <div>
    <button @click="open = !open">Toggle</button>
    <VueSlideToggle :open="open" tag="section" :duration="500">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum illo sapiente laboriosam incidunt, nulla, necessitatibus ab labore rerum hic eaque facilis! Eum sequi iure ullam recusandae reprehenderit, eligendi sit ducimus nisi dicta, tenetur laborum iusto dolores vero. Aspernatur quidem facilis saepe. Earum obcaecati et, amet quod quasi animi sit quas?
    </VueSlideToggle>
  </div>
</template>
 
<script>
import { VueSlideToggle } from '../src/index'
 
export default {
  data() {
    return {
      open: false,
    }
  },
  components: {
    VueSlideToggle
  },
}
</script> 

Component props

• open (Boolean) - open / hide content
• duration (Number) - animation duration
• tag (String) - Which HTML tag to use for the wrapper element. Defaults to div.