![\"Downloads](\"https://img.shields.io/npm/dm/@nativescript-community/ui-drawer.svg\")
\r\n![\"NPM](\"https://img.shields.io/npm/v/@nativescript-community/ui-drawer.svg\")
\n\t\n\t\t\r\n\n\t
\n Easily add a side drawer (side menu) to your projects.\n \n
\n\n![](\"https://raw.githubusercontent.com/nativescript-community/ui-drawer/master/images/demo-ios.gif\")
| ![](\"https://raw.githubusercontent.com/nativescript-community/ui-drawer/master/images/demo-android.gif\")
|\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [Configuration](#configuration)\r\n* [API](#api)\r\n\t* [Properties](#properties)\r\n\t* [Methods](#methods)\r\n\t* [Events](#events)\r\n* [Usage in Angular](#usage-in-angular)\r\n\t* [Examples:](#examples)\r\n* [Usage in React](#usage-in-react)\r\n\t* [Examples:](#examples-1)\r\n* [Usage in Svelte](#usage-in-svelte)\r\n\t* [Examples:](#examples-2)\r\n* [Usage in Vue](#usage-in-vue)\r\n\t* [Examples:](#examples-3)\r\n* [Usage in Vue3](#usage-in-vue3)\r\n\t* [Examples:](#examples-4)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-drawer`\n\n\r\n[](#configuration)\r\n\r\n## Configuration\nFor gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):\n\n```typescript\nimport { install } from '@nativescript-community/ui-drawer';\ninstall();\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Properties\n\n| Property | Default | Type | Description |\n| ------------------- | --------------------------------- | --------------------------- | ------------------------------------------------------- |\n| leftDrawer | `undefined` | `View` | View containing the content for the left side drawer |\n| rightDrawer | `undefined` | `View` | View containing the content for the right side drawer |\n| topDrawer | `undefined` | `View` | View containing the content for the top side drawer |\n| bottomDrawer | `undefined` | `View` | View containing the content for the bottom side drawer |\n| mainContent | `undefined` | `View` | View containing the main content of the app |\n| gestureEnabled | `true` | `boolean` | Boolean setting if swipe gestures are enabled |\n| backdropTapGestureEnabled | `true` | `boolean` | Allow tapping the backdrop to close the drawer |\n| backdropColor | `new Color('rgba(0, 0, 0, 0.7)')` | `Color` | The color of the backdrop behind the drawer |\n| leftDrawerMode | `slide` | `Mode ('under' or 'slide')` | The drawer's enter-animation behavior |\n| rightDrawerMode | `slide` | `Mode ('under' or 'slide')` | The drawer's enter-animation behavior |\n| gestureMinDist | `10` | number | The min \"swipe\" distance to trigger the menu gesture |\n| gestureHandlerOptions | `null` | PanGestureHandlerOptions | Options to customize the pan gesture handler |\n| leftSwipeDistance | `40` | number | The \"left\" zone size from where the gesture is recognized |\n| rightSwipeDistance | `40` | number | The \"right\" zone size from where the gesture is recognized |\n| topSwipeDistance | `40` | number | The \"top\" zone size from where the gesture is recognized |\n| bottomSwipeDistance | `40` | number | The \"bottom\" zone size from where the gesture is recognized |\n| leftOpenedDrawerAllowDraging | `true` | boolean | Allow dragging the opened menu |\n| rightOpenedDrawerAllowDraging | `true` | boolean | Allow dragging the opened menu |\n| topOpenedDrawerAllowDraging | `true` | boolean | Allow dragging the opened menu |\n| bottomOpenedDrawerAllowDraging | `true` | boolean | Allow dragging the opened menu |\n\n\n\n### Methods\n\n| Name | Return | Description |\n| ------------ | ------ | ----------------------------------------------- |\n| open() | `void` | Programatically open the drawer |\n| close() | `void` | Programatically close the drawer |\n| toggle() | `void` | Programatically toggle the state of the drawer |\n| install() | `void` | Install gestures |\n\n### Events\n\n| Name | Event Data | Description |\n| --------- | ------------------ | ---------------------------- |\n| open | `side`, `duration` | Drawer opens |\n| close | `side`, `duration` | Drawer closes |\n\n\r\n[](#usage-in-angular)\r\n\r\n## Usage in Angular\nImport the module into your project.\n\n```typescript\nimport { DrawerModule } from \"@nativescript-community/ui-drawer/angular\";\n\n@NgModule({\n imports: [\n DrawerModule\n ]\n schemas: [\n NO_ERRORS_SCHEMA\n ]\n})\n\nexport class AppModule { }\n```\n\n### Examples:\n\n- [Basic Drawer](demo-snippets/ng/basic-drawer)\n - A basic sliding drawer.\n- [All Sides](demo-snippets/ng/all-sides)\n - An example of drawers on all sides: left, right, top, bottom.\n\n\n\r\n[](#usage-in-react)\r\n\r\n## Usage in React\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport DrawerElement from '@nativescript-community/ui-drawer/react';\nDrawerElement.register();\n```\n\n### Examples:\n\n- [Basic Drawer](demo-snippets/react/BasicDrawer.tsx)\n - A basic sliding drawer.\n- [All Sides](demo-snippets/react/AllSides.tsx)\n - An example of drawers on all sides: left, right, top, bottom.\n\n\r\n[](#usage-in-svelte)\r\n\r\n## Usage in Svelte\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport DrawerElement from '@nativescript-community/ui-drawer/svelte';\nDrawerElement.register();\n```\n\n### Examples:\n\n- [Basic Drawer](demo-snippets/svelte/BasicDrawer.svelte)\n - A basic sliding drawer.\n- [All Sides](demo-snippets/svelte/AllSides.svelte)\n - An example of drawers on all sides: left, right, top, bottom.\n\n\r\n[](#usage-in-vue)\r\n\r\n## Usage in Vue\n\nRegister the plugin in your `app.js`.\n\n```typescript\nimport DrawerPlugin from '@nativescript-community/ui-drawer/vue'\nVue.use(DrawerPlugin);\n```\n\n### Examples:\n\n- [Basic Drawer](demo-snippets/vue/BasicDrawer.vue)\n - A basic sliding drawer.\n- [All Sides](demo-snippets/vue/AllSides.vue)\n - An example of drawers on all sides: left, right, top, bottom.\n\n\r\n[](#usage-in-vue3)\r\n\r\n## Usage in Vue3\n\nRegister the plugin in your `app.js`.\n\n```typescript\nimport DrawerPlugin from '@nativescript-community/ui-drawer/vue3'\n\napp.use(DrawerPlugin);\n```\n\n### Examples:\n\n- [Basic Drawer](demo-snippets/vue3/BasicDrawer.vue)\n - A basic sliding drawer.\n- [All Sides](demo-snippets/vue3/AllSides.vue)\n - An example of drawers on all sides: left, right, top, bottom.\n\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","users":{}}