NativeScript Drawer

NativeScript plugin that allows you to easily add a side drawer (side menu) to your projects. This can be used as an Open Source alternative to RadSideDrawer.

iOS Demo	Android Demo

---

Table of Contents

1. Installation
2. Configuration
3. API
4. Usage in Angular
5. Usage in Vue
6. Usage in Svelte
7. Usage in React
8. Demos and Development

Installation

ns plugin add @nativescript-community/ui-drawer

Configuration

For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):

import { install } from '@nativescript-community/ui-drawer';
install();

API

Properties

Property	Default	Type	Description
leftDrawer	undefined	View	View containing the content for the left side drawer
rightDrawer	undefined	View	View containing the content for the right side drawer
topDrawer	undefined	View	View containing the content for the top side drawer
bottomDrawer	undefined	View	View containing the content for the bottom side drawer
mainContent	undefined	View	View containing the main content of the app
gestureEnabled	true	boolean	Boolean setting if swipe gestures are enabled
backdropColor	new Color('rgba(0, 0, 0, 0.7)')	Color	The color of the backdrop behind the drawer
leftDrawerMode	slide	Mode ('under' or 'slide')	The color of the backdrop behind the drawer
rightDrawerMode	slide	Mode ('under' or 'slide')	The color of the backdrop behind the drawer
gestureMinDist	10	number	The min "swipe" distance to trigger the menu gesture
leftSwipeDistance	40	number	The "left" zone size from where the gesture is recognized
rightSwipeDistance	40	number	The "right" zone size from where the gesture is recognized
topSwipeDistance	40	number	The "top" zone size from where the gesture is recognized
bottomSwipeDistance	40	number	The "bottom" zone size from where the gesture is recognized
leftOpenedDrawerAllowDraging	true	boolean	Allow dragging the opened menu
rightOpenedDrawerAllowDraging	true	boolean	Allow dragging the opened menu
topOpenedDrawerAllowDraging	true	boolean	Allow dragging the opened menu
bottomOpenedDrawerAllowDraging	true	boolean	Allow dragging the opened menu

Methods

Name	Return	Description
open()	void	Programatically open the drawer
close()	void	Programatically close the drawer
toggle()	void	Programatically toggle the state of the drawer
install()	void	Install gestures

Events

Name	Event Data	Description
open	side, duration	Drawer opens
close	side, duration	Drawer closes

Usage in Angular

Import the module into your project.

import { DrawerModule } from "@nativescript-community/ui-drawer/angular";

@NgModule({
    imports: [
        DrawerModule
    ]
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

export class AppModule { }

Examples:

• Basic Drawer
  • A basic sliding drawer.
• All Sides
  • An example of drawers on all sides: left, right, top, bottom.

Usage in React

Register the plugin in your app.ts.

import DrawerElement from '@nativescript-community/ui-drawer/react';
DrawerElement.register();

Examples:

• Basic Drawer
  • A basic sliding drawer.
• All Sides
  • An example of drawers on all sides: left, right, top, bottom.

Usage in Svelte

Register the plugin in your app.ts.

import DrawerElement from '@nativescript-community/ui-drawer/svelte';
DrawerElement.register();

Examples:

• Basic Drawer
  • A basic sliding drawer.
• All Sides
  • An example of drawers on all sides: left, right, top, bottom.

Usage in Vue

Register the plugin in your app.js.

import DrawerPlugin from '@nativescript-community/ui-drawer/vue'
Vue.use(DrawerPlugin);

Examples:

• Basic Drawer
  • A basic sliding drawer.
• All Sides
  • An example of drawers on all sides: left, right, top, bottom.

Demos and Development

To run the demos, you must clone this repo recursively.

git clone https://github.com/nativescript-community/ui-drawer.git --recursive

Install Dependencies:

npm i # or 'yarn install' or 'pnpm install'

Interactive Menu:

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

Building Plugin:

npm run build

# or for Angular
npm run build.angular

Running Demos:

npm run demo.[ng|react|svelte|vue].[ios|android]

# Example:
npm run demo.svelte.ios