Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

UIUtil for Android, Lyrics, Tick animations, Comparisons, Satellite menus, Praise, Slide buttons, TAB indicators, Contact sorting, Drag sorting, Skidding deletes, Shadow effects, RecyclerView nesting RecyclerView, Map list Poi/Drawer effects, Progress settings, Clock set, Damping, Progress, Album, Snap, Progress, CircleDownload, AdvertSwitcher, Carousel ad, FlowLayout, Tag...; 歌词控件、打勾动画、对比、卫星菜单、点赞、滑动按钮、TAB指示器、联系人排序、拖曳排序、侧滑删除、阴影效果.、RecyclerView嵌套RecyclerView.、地图列表Poi/抽屉效果、进度设置、时钟设置、滑动阻尼、相册媒体快照、圆形下载进度，轮播广告, 流式布局，标签...

Stars: ✭ 1,018 (+159.69%)

Mutual labels: drag, sidebar

Zhpopupcontroller

Help you pop up custom views easily. and support pop-up animation, layout position, mask effect and gesture interaction etc.

Stars: ✭ 1,481 (+277.81%)

Mutual labels: drag, sidebar

Overlaycontroller

OverlayController easily pop your custom view and provide optional transition animation. written in swift 5.0

Stars: ✭ 94 (-76.02%)

Mutual labels: drag, sidebar

fxp-jquery-sidebar

A responsive and fluid sidebar with jQuery and Hammer.js

Stars: ✭ 14 (-96.43%)

Mutual labels: drawer, sidebar

minavdrawer

Easy to add different animations into standard NavigationDrawer.

Stars: ✭ 93 (-76.28%)

Mutual labels: drawer, drawerlayout

react-native-navigation-drawer-layout

React Native library to generate navigation drawer layout.

Stars: ✭ 26 (-93.37%)

Mutual labels: drawer, drawerlayout

Beagle

A smart, reliable, and highly customizable debug menu library for Android apps that supports screen recording, network activity logging, and many other useful features.

Stars: ✭ 287 (-26.79%)

Mutual labels: drawer

React Pro Sidebar

Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus

Stars: ✭ 359 (-8.42%)

Mutual labels: sidebar

Ttgemojirate

An emoji-liked rating view for iOS, implemented in Swift3.

Stars: ✭ 284 (-27.55%)

Mutual labels: drag

Akswiftslidemenu

Slide Menu (Drawer) in Swift

Stars: ✭ 281 (-28.32%)

Mutual labels: drawer

Hc Sticky

JavaScript library that makes any element on your page visible while you scroll.

Stars: ✭ 375 (-4.34%)

Mutual labels: sidebar

Corbind

Kotlin Coroutines binding APIs for Android UI widgets from the platform and support libraries

Stars: ✭ 357 (-8.93%)

Mutual labels: drawerlayout

Cupertino Pane

🎉📱Multi-functional panes and boards for next generation progressive applications

Stars: ✭ 267 (-31.89%)

Mutual labels: drawer

View All Similar Projects ➔

vue-drawer-layout

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)

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 supports APNG, you could turn to the GIF demo.

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 392

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (15) 🔗