nativescript-vue-global-drawer v1.2.0

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

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

Contributing

Thank you for considering contributing.

License

MIT