Nanotech Parading Mars

    @yst/vue-slidable

    0.2.1 • Public • Published

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

    Install

    npm i @yst/vue-slidable

    DownloadsWeekly Downloads

    1

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    4

    Last publish

    Collaborators

    • yst