@nativescript-community/ui-drawer

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

iOS Demo	Android Demo

Table of Contents

• Installation
• Configuration
• API
  • Properties
  • Methods
  • Events
• Usage in Angular
  • Examples:
• Usage in React
  • Examples:
• Usage in Svelte
  • Examples:
• Usage in Vue
  • Examples:
• Demos and Development
  • Setup
  • Build
  • Demos
• Questions

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

Methods

Events

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.