🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A tiny Drawer component with bounced animation for Vue.js apps.

Menu_Navigation

Documentation

Codacy Badge codecov All Contributors Build Status Greenkeeper badge Known Vulnerabilities License: MIT npm FOSSA Status

vue-simple-drawer

TODO

  • remove shadow for default style
  • add cover layer option
  • rename the scss vars
  • nest drawer?

Install

npm install vue-simple-drawer --save 

Quick Start

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

Advance Guide

Nest Drawer

   <button @click="toggle">Open/Close</button>     <Drawer @close="toggle" :align="align" :closeable="true">       <div v-if="open">         <span @click="innerOpen=true">           content here           content here           content here           content here           content here           content here           content here         </span>         <Drawer @close="innerOpen=false" :align="align" :closeable="true">           <div v-if="innerOpen">             content here             content here             content here           </div>         </Drawer>       </div>     </Drawer>      ...        data() {         return {           open: false,           innerOpen: false,           align: "left"         };       },

Customized Theme

  • In your customized scss file (demo.scss)
$--simple-drawer-close-width: 50px; @import "~vue-simple-drawer/src/index";
  • import the scss to override the default theme in main.js (entry file) before you import the Draw component
import "./demo.scss"

variables

close button style

  • $--simple-drawer-softorange
  • $--simple-drawer-tomatored
  • $--simple-drawer-mediumblu

close button size

  • $--simple-drawer-close-width

drawer background

  • $--simple-drawer-bg-color

License

FOSSA Status

Contributors

Thanks goes to these wonderful people (emoji key):

Vincent Guo
Vincent Guo

💻 📖 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!


You May Also Like