Press "Enter" to skip to content

A Tiny Drawer Component With Bounced Animation for Vue

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

PropertyTypeRequired?Description
alignString One of “left”, “up”, “right”, “down”, default is ‘right’. the location of the drawer.
closeableBoolean show the x – close button, default true
maskBoolean show the mask layer – close button, default true
maskClosableBoolean emit ‘close’ event when click on mask layer, default: false
zIndexNumber z-index value for the drawer, the nest drawer’s z-index will be increased automatically, default is 1000

Events

EventParamsRequired?Description
closeNone will be triggered when the user click the x close button

Slot

Slot NameDescription
defaultthe 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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.