Sliding Pane Component For Vue - SlideOut

Install & Download:

Description:

A Vue.js component to create sliding panels on the app. Compatible with Vue 3 and Vue 2.

How to use it:

1. Import and register the SlideOut component.

import Vue from 'vue'
import Slideout from '@hyjiacan/vue-slideout'
import '@hyjiacan/vue-slideout/lib/slideout.css'
Vue.use(Slideout, {
  // props here
})

2. Add a basic sliding panel to your app.

<template>
  <slideout @closing="onClosing" v-model="visible" title="Panel Title">
    <div>Panel Content Here</div>
  </slideout>
</template>

export default {
  name: 'Foobar',
  components: { Slideout },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    onClosing (e) {
      // ...
    }
  }
}

3. Available props.

/**
 * The size of slideout.
 * If the value if an Array, then:
 * the 1st value is the width,
 * the 2nd value is the height.
 * If there is only one item in the array, then:
 * the width equals with the height.
 */
size: {
  type: [String, Number, Array],
  default: 400
},
/**
 * If to allow resize operation.
 */
resizable: {
  type: Boolean,
  default: false
},
/**
 * The minimize value for resizing.
 * This does not limit the value of size.
 */
minSize: {
  type: Number,
  default: 100
},
/**
 * The minimize value for resizing.
 * 0 means there is no limit.
 * This does not limit the value of size.
 */
maxSize: {
  type: Number,
  default: 0
},
zIndex: {
  type: Number,
  default: 1997
},
/**
 * Is slideout visible.
 * Do not specify this directly, use v-model instead.
 */
modelValue: {
  type: Boolean,
  default: false
},
/**
 * The title text
 */
title: {
  type: String
},
/**
 * Custom class for slideout.
 */
customClass: {
  type: String
},
/**
 * If to show the mask layer.
 */
showMask: {
  type: Boolean,
  default: true
},
/**
 * The background color of mask layer.
 */
maskColor: {
  type: String,
  default: null
},
/**
 * If to close slideout while mask is clicked.
 */
closeOnMaskClick: {
  type: Boolean,
  default: true
},
/**
 * Whether to ignore Esc.
 */
ignoreEsc: {
  type: Boolean,
  default: false
},
/**
 * The dock side, the default value is "right".
 */
dock: {
  type: String,
  default: 'right',
  validator: value => ['top', 'right', 'bottom', 'left'].indexOf(value) >= 0
},
/**
 * Specify the parent element to append slideout to.
 */
target: {
  type: [String, HTMLElement],
  default: 'body'
},
disableAnimation: {
  type: Boolean,
  default: false
},
fillParent: {
  type: Boolean,
  default: false
},
/**
 * Whether to show the close button.
 */
showClose: {
  type: Boolean,
  default: true
},
/**
 * Whether to show the fill-parent button.
 */
showFillButton: {
  type: Boolean,
  default: false
},
/**
 * Display slideout as fixed (The scroll will be locked)
 */
fixed: {
  type: Boolean,
  default: false
},
/**
 * The offset to dock side. ("px" or "%)
 */
offset: {
  type: String,
  default: '0'
},
/**
 * Whether to show the close button as arrow.
 */
arrowButton: {
  type: Boolean,
  default: true
},
/**
 * Render content while "visible" is "true".
 */
renderWhenVisible: {
  type: Boolean,
  default: false
}

4. Events.