@therunninghub/vue-drawer NPM

npm

@therunninghub/vue-drawer

Vue Drawer for Vue.JS.

This package is forked from the original package vue-simple-drawer by Vincent Guo.

Install

npm install @therunninghub/vue-drawer --save

yarn add @therunninghub/vue-drawer

Quick Start

<template>
  <div id="app">
    <button @click="toggle">toggle</button>
    <Drawer @close="toggle" align="left" :closable="true">
      <div v-if="open">content here</div>
    </Drawer>
  </div>
</template>

<script>
import Drawer from "vue-drawer"
export default {
  name: "app",
  data() {
    return {
      open: true
    }
  },
  components: {
    Drawer
  },
  methods: {
    toggle() {
      this.open = !this.open
    }
  }
}
</script>

Prop Types

Property	Type	Description
position	String	One of "left", "up", "right", "down", default: `right`. The position of the drawer.
animation	String	One of "slide", "bounce", default: `slide`. The animation of the drawer.
closable	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: `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

<template>
  ...
  <button @click="toggle">Open/Close</button>
  <Drawer @close="toggle" :align="align" :closable="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" :closable="true">
        <div v-if="innerOpen">
          content here
          content here
          content here
        </div>
      </Drawer>
    </div>
  </Drawer>
  ...
</template>

<script>
export default {
  data() {
    return {
      open: false,
      innerOpen: false,
      align: "left"
    };
  }
}
</script>

Customized Theme

In your customized scss file (demo.scss)

$drawerCloseButtonWidth: 50px;
@import "~vue-drawer/src/index";

import the scss to override the default theme in main.js (entry file) after you import the Draw component

import "./demo.scss";

SCSS variables

close button style

\$drawerCloseButtonColor
\$drawerCloseButtonHoverColor

close button size

\$drawerCloseButtonWidth

drawer background

\$drawerBackgroundColor

drawer text color

\$drawerTextColor

License

Contributors

Thanks goes to these wonderful people (emoji key):

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

vue drawer component panel layout

core-js vue

@everything-registry/sub-chunk-914 @zalastax/nolb-_ther

1.0.10

3 years ago

1.0.9

3 years ago