- Notifications
You must be signed in to change notification settings - Fork82
A simple DrawerLayout component for Vue.js.
License
hjl19911127/vue-drawer-layout
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple DrawerLayout component forVue.js
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).
If the image is not animating, maybe your browser does not supportsAPNG, you could turn to theGIF demo.
- Vue.js (2.x)
Modern (mobile) browsers and Internet Explorer 10+(due to CSS transition support) and X5 core is supported.
npm install vue-drawer-layout --save
The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.
importVuefrom'vue'importDrawerLayoutfrom'vue-drawer-layout'Vue.use(DrawerLayout)// orimport{DrawerLayout}from'vue-drawer-layout'Vue.component(DrawerLayout.name,DrawerLayout)
You can easily just set nothing or onlydrawer-width prop to get a simple drawer.It act above the main content.
<vue-drawer-layoutref="drawer":drawer-width="800"><divclass="drawer-content"slot="drawer"><!-- drawer-content --></div><divslot="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-layoutref="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"><divclass="drawer-content"slot="drawer"><!-- drawer-content --></div><divslot="content"><!-- main-content --></div></vue-drawer-layout>
| 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 asdrawer-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 |
| Name | Info |
|---|---|
| drawer | content in drawer-content |
| content | content in main-content |
| Name | Info | Arguments | Usage |
|---|---|---|---|
| toggle | method to show and hide drawer | visible(Boolean) | toggle(true/false) ortoggle()to show(hide) |
| 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 | - |
Copyright (c) 2018 Alexander Huang.
About
A simple DrawerLayout component for Vue.js.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.