GitHub - dreambo8563/vue-simple-drawer: A tiny Drawer component with bounced animation for Vue 🚪🎏🗄🔛 (original) (raw)

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

toggle

content here

Prop Types

Property	Type	Required?
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 <Drawer @close="toggle" :align="align" :closeable="true">

<span @click="innerOpen=true"> content here content here content here content here content here content here content here <Drawer @close="innerOpen=false" :align="align" :closeable="true">

content here content here content here

...

  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) after you import the Draw component

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

drawer text color

$--simple-drawer-fg-color

License

Contributors

Thanks goes to these wonderful people (emoji key):

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