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.
- @opening(pause: Boolean, resume: Boolean)
- @opened()
- @closing(pause: Boolean, resume: Boolean)
- @closed()
Preview:
Changelog:
12/16/2022
- v3.0.3
09/09/2021
- v3.0.0
12/07/2020
- v2.5.7: Update
08/18/2020
- v2.5.6: FIX Missed close animation
07/06/2020
- v2.5.5: auto focus after visible.
Download Details:
Author: hyjiacan
Live Demo: https://hyjiacan.github.io/vue-slideout/?lang=en
Download Link: https://github.com/hyjiacan/vue-slideout/archive/master.zip
Official Website: https://github.com/hyjiacan/vue-slideout
Install & Download:
