vue-drawer-layout

A simple DrawerLayout component like Android has for Vue.js

中文文档

Demo

http://share.codehuang.com/vue-drawer-layout

Mobile QQ by Alexander Huang(click me or scan the qrcode)

Click the avatar at the top-left or touch(click) and drag to right(left).

Dependencies

Vue.js (2.x)

Browser Support

Modern (mobile) browsers and Internet Explorer 10+(due to CSS transition support) and X5 core is supported.

Installation

npm install vue-drawer-layout --save

Usage

The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

import Vue from 'vue'
import DrawerLayout from 'vue-drawer-layout'

Vue.use(DrawerLayout)
// or
import {DrawerLayout} from 'vue-drawer-layout'
Vue.component(DrawerLayout.name, DrawerLayout)

You can easily just set nothing or only drawer-width prop to get a simple drawer.It act above the main content.

<vue-drawer-layout
      ref="drawer"
      :drawer-width="800">
          <div class="drawer-content" slot="drawer">
            <!-- drawer-content -->
          </div>
          <div slot="content">
            <!-- main-content -->
          </div>
</vue-drawer-layout>

Or you can set every prop as you want to get a fantastic drawer like mobile QQ has(It act below the main content and with distance is 1/3 of the main content drag).

<vue-drawer-layout
      ref="drawer"
      :drawer-width="800"
      :enable="true"
      :animatable="true"
      :z-index="0"
      :drawable-distance="Math.floor(800/3)"
      :content-drawable="true"
      :backdrop="true"
      :backdrop-opacity-range="[0,0.4]"
      @slide-start="handleSlideStart"
      @slide-move="handleSlideMove"
      @slide-end="handleSlideEnd"
      @mask-click="handleMaskClick">
          <div class="drawer-content" slot="drawer">
            <!-- drawer-content -->
          </div>
          <div slot="content">
            <!-- main-content -->
          </div>
</vue-drawer-layout>

API

Props

Name	Info	Type	Default
drawer-width	width of drawer(px)	`Number`	80% of the container(parentNode) width
drawable-distance	farthest distance to draw(px)	`Number`	same as `drawer-width` prop
z-index	z-index of drawer	`Number`	`818`(Don't Ask^_^)
content-drawable	whether to make content-wrapper drawable	`Boolean`	`false`
backdrop	whether to show backdrop	`Boolean`	`true`
backdrop-opacity-range	the opacity range of backdrop[min,max]	`Array`	`[0,0.4]`
enable	is drawer enable	`Boolean`	`true`
animatable	is drawer animate during moving	`Boolean`	`true`
reverse	is drawer slide out from right	`Boolean`	`false`

Slots

Name	Info
drawer	content in drawer-content
content	content in main-content

Methods

Name	Info	Arguments	Usage
toggle	method to show and hide drawer	`visible(Boolean)`	`toggle(true/false)` or `toggle()`to show(hide)

Events

Name	Info	Callback Arguments
slide-start	drawer start to slide (fired when touchdown)	-
slide-move	drawer sliding (fired when touchmove)	`pos(int)`
slide-end	drawer sliding (fired when touchend or transitionend)	`visible(boolean)`
mask-click	touch(click) on mask	-

License

MIT License.

PierrickP/vue-drawer-layout