vue-simple-drawer is a small drawer component with bounced/feedback animations for Vue.js applications.
vue material drawer, vue drawer layout, v navigation drawer click outside, navigation drawer vuetify example, vuetify sidebar example, v navigation drawer close on click
TODO
- remove shadow for default style
- add cover layer option
- rename the scss vars
- nest drawer?
How to make use of it:
Install
npm install vue-simple-drawer --save
Usage
<template>
<div id="app">
<button @click="toggle">toggle</button>
<Drawer @close="toggle" align="left" :closeable="true">
<div v-if="open">content here</div>
</Drawer>
</div>
</template><script>
import Drawer from "vue-simple-drawer"
export default {
name: "app",
data() {
return {
open: true
}
},
components: {
Drawer
},
methods: {
toggle() {
this.open = !this.open
}
}
}
</script>Prop Types
| Property | Type | Required? | Description |
|---|---|---|---|
| align | String | One of “left”, “up”, “right”, “down”, default is ‘right’. the location of the drawer. | |
| closeable | Boolean | show the x – close button, default true | |
| mask | Boolean | show the mask layer – close button, default true | |
| maskClosable | Boolean | emit ‘close’ event when click on mask layer, default: false | |
| zIndex | Number | z-index value for the drawer, the nest drawer’s z-index will be increased automatically, default is 1000 |
Events
| Event | Params | Required? | Description |
|---|---|---|---|
| close | None | will be triggered when the user click the x close button |
Slot
| Slot Name | Description |
|---|---|
| default | the content display in the drawer which can show/hide the draw by v-if |
tiny drawer component for vue js, vue-simple-drawer Plugin/Github, vue menu component
See Demo And Download
Official Website(dreambo8563): Click Here
This superior jQuery/javascript plugin is developed by dreambo8563. For extra advanced usage, please go to the official website.
