NativeScript-Vue Global Drawer
A Vue.js plugin that bootstrap the integration of RadSideDrawer in your NativeScript-Vue project.
Declare your drawer once and access it everywhere through your components.
If you need one drawer over your App pages this for you.
Install
npm install nativescript-ui-sidedrawer --save
npm install nativescript-vue-global-drawer --save
Usage
In main.js
import Vue from 'nativescript-vue'
import NSVueGlobalDrawer from 'nativescript-vue-global-drawer'
Vue.use(NSVueGlobalDrawer)
new Vue({
render: h => h('frame', [h(App)])
}).$start()
In App.vue, declare the global drawer.
<template>
<Page actionBarHidden="true">
<GlobalDrawer>
<template slot="content">
<Label class="drawer-header" text="Drawer"/>
<Label class="drawer-item" text="Item 1"/>
<Label class="drawer-item" text="Item 2"/>
<Label class="drawer-item" text="Item 3"/>
</template>
<template slot="frame">
<!--default page-->
<Page1/>
</template>
</GlobalDrawer>
</Page>
</template>
API
Slots
| Name | Description |
|---|---|
| content | The drawer content. |
| frame | The default drawer page that will appear in the beginning. |
Drawer methods
Anywhere in your components you can call these methods to control the drawer behavior.
.$drawer.open() : void
Open drawer.
<Button @tap="$drawer.open()">Show</Button>
.$drawer.close() : void
Close drawer.
<Button @tap="$drawer.close()">Close</Button>
.$drawer.toggle() : void
Toggle drawer.
<Button @tap="$drawer.toggle()">Toggle</Button>
.$drawer.enable() : void
Enable enable.
<Button @tap="$drawer.enable()">Enable</Button>
.$drawer.disable() : void
Disable drawer. This will disable gestures too.
<Button @tap="$drawer.disable()">Disable</Button>
.$drawer.setGestures(boolean) : void
Enable/Disable gestures.
<Button @tap="$drawer.setGestures(true)">Enable Gestures</Button>
.$drawer.getDrawer()
Get drawer instance.
.$drawer.getFrame()
Get drawer frame instance.
.$drawer.getStatus() : boolean
Get drawer status (enabled/disabled).
Navigation
To navigate inside the drawer, you have to get the drawer frame instance to use in manual navigation.
Example:
this.$navigateTo(Page1, {
transition: {},
transitionIOS: {},
transitionAndroid: {},
props: {
foo: 'bar',
},
frame: this.$drawer.getFrame()
})
Events
| Event Name | Description |
|---|---|
| drawerOpened | the drawer has been opened. |
| drawerOpening | the drawer is about to open. |
| drawerClosed | the drawer has been closed. |
| drawerClosing | the drawer is about to close. |
| drawerPan | the drawer is being opened by its edge gesture. |
Contributing
Thank you for considering contributing.
License
-
1.给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件，
-
Navigation Drawer是从屏幕的左侧滑出，显示应用导航的视图，覆盖在主视图上。 Navigation Drawer是Android团对在2013 google IO大会期间更新的Support库（V13）中新加入的重要的功能。 实现现Navigation Drawer需要使用最新支持库（V13）的DrawerLayout。Navigation Drawer的设计指南请参考 Navig
-
详情参考https://github.com/ilansas/react-native-navigation-drawer https://github.com/root-two/react-native-drawer
-
Supporting NativeScript-Vue NativeScript-Vue is an MIT-licensed open source project made possible by our sponsors: and these awesome backers: Tiago Alves Kamen Bundev Jan Weller OpenLitterMap Aparajit
-
NativeScript-Vue Multi Drawer A plugin which provides a drawer component that supports multiple drawers. All drawers are optional, and can be configured individually. Features: drawers on left, right,
-
Supporting NativeScript-Vue-Examples This project is a personal maintenance project, due to limited energy, you need to support. Welcome star, your star is my biggest support! NSVue Examples A native
-
A simple router implementation that is suitable for NativeScript-Vue. Prerequisites / Requirements All your own components must have unique name All routes name must have unique name Your app need a m
-
NativeScript-Vue-Navigator NativeScript-Vue-Navigator is a simple router implementation that is suitable for NativeScript-Vue. Quick Start $ npm install --save nativescript-vue-navigator // main.jsimp
-
Awesome NativeScript Vue NativeScript-vue resource collection. This is a document to be completed together. Collaboration with the "revision" branch. Thank you Official: Documentation Repository Slack