(based on David Walsh's Pure CSS Slide Up and Slide Down)

Table of Contents

• Getting Started
• Options
• Events
• Example

Getting Started

Install

NPM

$ npm install @yst/vue-slidable

Yarn

$ yarn add @yst/vue-slidable

Import and use it (as a plugin):

import Vue from 'vue';
import Slidable from '@yst/vue-slidable';

Vue.use(Slidable);

// Or, with options
Vue.use(Slidable, {
  /**
   * The globally registered name
   * @example
   * <slidable></slidable>
   */
  name: 'slidable'
});

⚠️ Note: This only provides the sliding functionalities, so the styling is entirely up to you.

Options

Props

expanded

• type: boolean
• default: false

The component's state (expanded/collapsed) based on CSS max-height property.

tag

• type: string
• default: div

easing.duration

• type: number | string
• default: 300 (in milliseconds)

easing.timingFunction

• type: string
• default: easeOutQuart

For more easings see postcss-easings.

updateOnResize

(⚠ Deprecated in favor of disableResizeUpdate).

• type: boolean
• default: true

Recalculates the container's max-height on window.resize.

disableResizeUpdate

• type: boolean
• default: false

Disables updating container's max-height on window.resize.

debounce

• type: number | boolean
• default: 400

Debounces the frequency of the component updates on data change.

passive

• type: boolean
• default: true

See passive event listener and how it could improve performance (on certain events).

Model

{
  model: 'expanded',
  event: 'change'
}

Events

• @expanded Called when the containing component has opened/expanded (slides down).
• @collapsed Called when the containing component has closed/collapsed (slides up).

Example

<h3 @click="toggle">Click to expand/collapse</h3>

<slidable tag="ul" v-model="expanded">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</slidable>

export default {
  data: () => ({
    expanded: false
  }),

  methods: {
    toggle() {
      this.expanded = !this.expanded;
    }
  }
};