vdl

vue-drawer-layout

A simple DrawerLayout component for Vue.js.

Showing:

Popularity

Downloads/wk

206

GitHub Stars

395

Maintenance

Last Commit

2yrs ago

Contributors

3

Package

Dependencies

1

Size (min+gzip)

13.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-drawer-layout

npm npm travis npm npm

A simple DrawerLayout component for Vue.js

中文文档

Demo

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

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

Try it

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

Demo

If the image is not animating, maybe your browser does not supports APNG, you could turn to the GIF demo.

Dependencies

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

NameInfoTypeDefault
drawer-widthwidth of drawer(px)Number80% of the container(parentNode) width
drawable-distancefarthest distance to draw(px)Numbersame as drawer-width prop
z-indexz-index of drawerNumber818(Don't Ask^_^)
content-drawablewhether to make content-wrapper drawableBooleanfalse
backdropwhether to show backdropBooleantrue
backdrop-opacity-rangethe opacity range of backdrop[min,max]Array[0,0.4]
enableis drawer enableBooleantrue
animatableis drawer animate during movingBooleantrue
reverseis drawer slide out from rightBooleanfalse

Slots

NameInfo
drawercontent in drawer-content
contentcontent in main-content

Methods

NameInfoArgumentsUsage
togglemethod to show and hide drawervisible(Boolean)toggle(true/false) or toggle()to show(hide)

Events

NameInfoCallback Arguments
slide-startdrawer start to slide (fired when touchdown)-
slide-movedrawer sliding (fired when touchmove)pos(int)
slide-enddrawer sliding (fired when touchend or transitionend)visible(boolean)
mask-clicktouch(click) on mask-

License

MIT License.

Copyright (c) 2018 Alexander Huang.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
dorea10 Ratings0 Reviews
2 months ago

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial