nativescript-vue/nativescript-vue-multi-drawer

A NativeScript-Vue component for creating multiple side drawers (4 sides supported)

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, top and bottom
• swipe to open
• swipe to close
• tap outside to close
• progressively dim main content as the drawer is opened

Quick Start

$ npm i --save nativescript-vue-multi-drawer

// main.js
import Vue from 'nativescript-vue'
...
+ import MultiDrawer from 'nativescript-vue-multi-drawer'
+ Vue.use(MultiDrawer)

Optionally set default options by passing options when installing the plugin:

Vue.use(MultiDrawer, { 
  // override any option here
  // for example enable debug mode
  debug: true
})

For the available options check the source of defaultOptions

<MultiDrawer>
  <StackLayout slot="left">
    <Label text="Im in the left drawer" />  
  </StackLayout>
  <StackLayout slot="right">
    <Label text="Im in the right drawer" />  
  </StackLayout>
  <StackLayout slot="top">
    <Label text="Im in the top drawer" />  
  </StackLayout>
  <StackLayout slot="bottom">
    <Label text="Im in the bottom drawer" />  
  </StackLayout>
  
  <Frame /> <!-- main content goes into the default slot -->
</MultiDrawer>

The component will only enable drawers that have contents in them, so if you only need a left and a right side drawer, you can just remove the top and bottom slots and it will work as expected.

Opening a drawer from code

Assign a ref to the Drawer component

<MultiDrawer ref="drawer" />

And use this.$refs.drawer.open(side) where side is a string: left, right, top or bottom.

Using v-model to toggle the drawer

The drawer can be opened through v-model. This is useful as it allows controlling the drawer state with Vue's reactivity system. For example, the value of v-model could easily come from a vuex store.

<MultiDrawer v-model="drawerState" />

export default {
  data() {
    return {
      drawerState: false // closed
    }
  },
  
  methods: {
    doStuff() {
      // do stuff
      this.drawerState = 'left' // this will open the left drawer
    }
  }
}

nativescript-vue-multi-drawer's Issues

how can I disable slide to open?

How can I change the size of drawer

Is it possible to add a prop to disable the backdrop close method?

Is it possible to add a prop to disable the backdrop close method? I'd gladly put a PR in unless there is a better solution.

Build on Android not working

When building for Android, app throws a JavaScript error and is unable to build.

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication:
com.tns.NativeScriptException:

Error calling module function

Error calling module function

Error: java.lang.ClassNotFoundException: com.tns.NativeScriptActivity
java.lang.Class.classForName(Native Method)
java.lang.Class.forName(Class.java:453)
java.lang.Class.forName(Class.java:378)
com.tns.Runtime.getClassForName(Runtime.java:1036)
com.tns.ClassResolver.resolveClass(ClassResolver.java:27)
com.tns.Runtime.resolveClass(Runtime.java:604)
com.tns.Runtime.runModule(Native Method)
com.tns.Runtime.runModule(Runtime.java:553)
com.tns.Runtime.run(Runtime.java:545)
com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
android.app.ActivityThread.handleBindApplication(ActivityThread.java:5871)
android.app.ActivityThread.access$1100(ActivityThread.java:199)
android.app.ActivityThread$H.handleMessage(ActivityThread.java:1650)
android.os.Handler.dispatchMessage(Handler.java:106)
android.os.Looper.loop(Looper.java:193)
android.app.ActivityThread.main(ActivityThread.java:6669)
java.lang.reflect.Method.invoke(Native Method)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

When I comment out the MultiDrawer import from my main.js file, the error goes away and my app builds fine, so this is what I have narrowed it down to.

One thing to note: If I build the app with a different drawer like RadSideDrawer, then comment out the RadSideDrawer and uncomment out the MultiDrawer (without rebuilding) tns run android --bundle, it will work fine. If I run a clean and build, it throws the error above.