https://github.com/dimensi/vue-slide-toggle

Vue component for like jQuery slideUp / slideDown animations
https://github.com/dimensi/vue-slide-toggle

Last synced: about 2 months ago
JSON representation

Vue component for like jQuery slideUp / slideDown animations

• Host: GitHub
• URL: https://github.com/dimensi/vue-slide-toggle
• Owner: dimensi
• License: mit
• Created: 2018-06-27T18:20:46.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-07-31T20:38:13.000Z (over 5 years ago)
• Last Synced: 2024-11-01T23:02:09.588Z (about 2 months ago)
• Language: JavaScript
• Size: 143 KB
• Stars: 4
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-slide-toggle

Vue component for like jQuery slideUp / slideDown animations

# Demo

[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-5t1le?fontsize=14)

# Install

Via Yarn:

```bash

yarn add vue-slide-toggle

```

Via NPM:

```bash

npm i vue-slide-toggle

```

Add plugin into your app

```js

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

```html

```

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

# Usage

```html

  


    Toggle

    

      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?

    

  


import { VueSlideToggle } from '../src/index'

export default {

  data() {

    return {

      open: false,

    }

  },

  components: {

    VueSlideToggle

  },

}

```

## 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`.