https://github.com/danieldiekmeier/vue-slide-up-down

Like jQuery's slideUp/slideDown/slideToggle, but for Vue!
https://github.com/danieldiekmeier/vue-slide-up-down

component slidedown slideup vue vue2 vuejs

Last synced: about 5 hours ago
JSON representation

Like jQuery's slideUp/slideDown/slideToggle, but for Vue!

• Host: GitHub
• URL: https://github.com/danieldiekmeier/vue-slide-up-down
• Owner: danieldiekmeier
• License: mit
• Created: 2017-03-06T14:45:55.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2023-12-09T00:20:11.000Z (11 months ago)
• Last Synced: 2024-04-27T05:32:35.940Z (7 months ago)
• Topics: component, slidedown, slideup, vue, vue2, vuejs
• Language: JavaScript
• Homepage:
• Size: 246 KB
• Stars: 201
• Watchers: 6
• Forks: 44
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# vue-slide-up-down

Like jQuery's [`slideUp`](http://api.jquery.com/slideup/) / [`slideDown`](http://api.jquery.com/slidedown/) / [`slideToggle`](http://api.jquery.com/slidetoggle/), but for [Vue](https://vuejs.org)!

Demo: https://codepen.io/danieldiekmeier/pen/YapGWq

## Installation

```sh

npm i vue-slide-up-down

```

```js

import { createApp } from 'vue'

import SlideUpDown from 'vue-slide-up-down'

const app = createApp({ ... })

app.component('slide-up-down', SlideUpDown)

```

> [!NOTE]

> Version 3 of this package is only compatible with Vue 3. If you're still on Vue 2, install the previous version with `npm i vue-slide-up-down@2`

## Usage

```html



  
Always show this


  

    Only show this if "active” is true

  



```


The component takes four props:

- `active` (Boolean, required): Whether to show the component (`true`) or not (`false`)

- `duration` (Number, optional): How long the animation is supposed to be, in milliseconds. Defaults to `500`.

- `tag` (String, optional): Which HTML tag to use for the wrapper element. Defaults to `div`.

- `use-hidden` (Boolean, optional): Whether to apply the `hidden` attribute to the element when closed. Defaults to `true`. This hides the component from the screen and from assistive devices. The internal elements of the component are completely invisible, and can't be focused (by a keyboard or assistive device). (This is probably what you want!)

  If you really need to, you can set this property to `false` to _not_ use the `hidden` attribute. For example if you want to have a `min-height` on your component and not actually transition to a height of `0`.

  **⚠️ Be aware that this can create accessibility issues**, specifically for users with a keyboard or screen reader. Even though the component may _appear_ hidden, focusable elements within the component are still able to be accessed through keyboard navigation.

The component emits four events:

- `open-start`

- `open-end`

- `close-start`

- `close-end`

```html

```

### Custom `transition-timing-function`

If you want to use a different timing function, add some CSS for your `` element. (See `demo/index.html` for a full example.)

```html

  .wobbly-accordion {

    transition-timing-function: cubic-bezier(0.195, 1.65, 0.435, -0.6);

  }

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta omnis velit

  ab culpa, officia, unde nesciunt temporibus cum reiciendis distinctio.

```