nativescript-vue-global-drawer
by moeddami | v1.2.0
A Vue.js plugin that bootstrap the integration of RadSideDrawer in your NativeScript-Vue project.
npm i --save nativescript-vue-global-drawer
  • Version: 1.2.0
  • GitHub:
  • Downloads:
    • Last Day:   2
    • Last Week:  5
    • Last Month: 23

NPM

npm version

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

MIT