@nativescript-community/ui-drawer
Easily add a side drawer (side menu) to your projects.
npm i --save @nativescript-community/ui-drawer

@nativescript-community/ui-drawer

Downloads per month NPM Version

Easily add a side drawer (side menu) to your projects.


iOS Demo Android Demo

Table of Contents

Installation

Run the following command from the root of your project:

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
gestureHandlerOptions null PanGestureHandlerOptions Options to customize the pan gesture handler
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

Setup

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.

Build

npm run build

npm run build.angular # or for Angular

Demos

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

npm run demo.svelte.ios # Example

Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.