/vue-slidable

@yst/vue-slidable · Vue component-based utility for showing/hiding an element with "sliding" effect

Primary LanguageVueMIT LicenseMIT

Vue Slidable

Vue component-based utility for showing/hiding an element with "sliding" effect

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

Table of Contents

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;
    }
  }
};