{"_id":"@bigin/ui-persistent-bottomsheet","_rev":"10-d4139094d22ca3498da937225d94996a","name":"@bigin/ui-persistent-bottomsheet","dist-tags":{"latest":"0.0.14"},"versions":{"0.0.14":{"name":"@bigin/ui-persistent-bottomsheet","version":"0.0.14","keywords":["NativeScript","JavaScript","Android","iOS","NativeScript UI","menu","nativescript-community","Angular","Vue.js","Svelte"],"author":{"name":"Martin Guillon","email":"martin@akylas.fr"},"license":"Apache-2.0","_id":"@bigin/ui-persistent-bottomsheet@0.0.14","maintainers":[{"name":"tammai.bigin","email":"tam.mai@bigin.vn"},{"name":"trinhnguyen1103","email":"trinh.nguyen@bigin.vn"}],"homepage":"https://github.com/nativescript-community/ui-persistent-bottomsheet","bugs":{"url":"https://github.com/nativescript-community/ui-persistent-bottomsheet/issues"},"dist":{"shasum":"baf4ab18dd6f46f5e55abf3a1f51977555063e0d","tarball":"https://registry.npmjs.org/@bigin/ui-persistent-bottomsheet/-/ui-persistent-bottomsheet-0.0.14.tgz","fileCount":21,"integrity":"sha512-KhMASkLjurboNnsoxrWUQDZIFiMXp79f2V4kzVkAprsuJtO7JI5Zts85wmhHkmv/Ej1gt6OddmDNXheU53qneQ==","signatures":[{"sig":"MEQCIDi/VEwp1Z3Gw46SImOLepubY8Bf7UDcfInkCd9h4W6UAiBFvoaa+9YUwadWEF7rzkiY04exbMVAhY89CRIvViDuoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/sHRCRA9TVsSAnZWagAAWEwP/RJzJO9g4qu61gqGxIQM\nsQOZ+XBH2Jg9k7ejfzJWMHcrcjFgFT7QLsuXVoOb2h3xk2UQsWj/16etIdxD\n2NTNBAS43JSu7OlNR8KeTXItibFKAzzYxw4lMwYDIvInKp/yi1JFcfSc5imE\nAMJnSe/A6vKWULBzAGq2gHJhrniqb4OFizVdGSN/plGHDNU4rm5oIsQ24KeK\njd/+NaJgRl0EHjgeXRwBYj8ovdomj+3Uz57S1hgFR+dA+ZEOS9QNtDA3j8qF\nHxHCpM//w7f8GTAEtfwpQs7vhEKkT59GZUlwMSUnQOKAriaXPXP54g4HdV4g\nlefepVbh7Sd5ns6FYe4HnHewL6kYny0yCPJhMWtl+OL8IJbs53GhukpxcxJt\nnIsfVZC0XwY51IIq5ANfWaINBFlbf1NezabfYdCp7M7n7LTLMXoiTabKwdAU\nKyk4AADJva8MxYSc4cntefiFyqCNmodBUAugjSGGgTvFuqm+3gs09KkIXycM\ncKbmIE/kbb5is9/fs9UrzT5mC4VaroQWt9ma0RMDIfc0LnECg6ZpgeYwLOXB\nMNm2xEXYL0sI13TYGxdyqHnl3whd5A2Af7X08rB28Yl/JunChYVs+65p37eV\nQe2S2MGzb0jN3JkXugDbSpi4j8hxjmcOhtElDLD2fRisEjXpZb+bOnZhk1n7\nFNRP\r\n=adkP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./index","typings":"./index.d.ts","_npmUser":{"name":"tammai.bigin","email":"tam.mai@bigin.vn"},"_npmVersion":"6.14.8","description":"NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"@nativescript-community/gesturehandler":"^0.1.28"},"nativescript":{"platforms":{"ios":"6.0.0","android":"6.0.0"}},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui-persistent-bottomsheet_0.0.14_1610531280612_0.3674352972684709","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-01-13T09:48:00.406Z","modified":"2026-01-07T04:08:45.958Z","0.0.14":"2021-01-13T09:48:00.778Z"},"bugs":{"url":"https://github.com/nativescript-community/ui-persistent-bottomsheet/issues"},"author":{"name":"Martin Guillon","email":"martin@akylas.fr"},"license":"Apache-2.0","homepage":"https://github.com/nativescript-community/ui-persistent-bottomsheet","keywords":["NativeScript","JavaScript","Android","iOS","NativeScript UI","menu","nativescript-community","Angular","Vue.js","Svelte"],"description":"NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.","maintainers":[{"email":"trinh.nguyen@bigin.vn","name":"trinhnguyen1103"},{"email":"vy.trinh@bigin.vn","name":"vytrinh-bg"},{"email":"duyen.tran@bigin.vn","name":"duynhuyn"}],"readme":"# NativeScript BottomSheet\n\nNativeScript plugin that allows you to easily add persistent bottomsheet to your projects.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-persistent-bottomsheet.svg)](https://www.npmjs.com/package/@nativescript-community/ui-persistent-bottomsheet)\n[![npm downloads](https://img.shields.io/npm/dm/@nativescript-community/ui-persistent-bottomsheet.svg)](https://www.npmjs.com/package/@nativescript-community/ui-persistent-bottomsheet)\n[![npm downloads](https://img.shields.io/npm/dt/@nativescript-community/ui-persistent-bottomsheet.svg)](https://www.npmjs.com/package/@nativescript-community/ui-persistent-bottomsheet)\n\n---\n## Table of Contents\n1. [Installation](#installation)\n2. [Configuration](#configuration)\n3. [API](#api)\n4. [Usage in Angular](#usage-in-angular)\n5. [Usage in Vue](#usage-in-vue)\n6. [Usage in Svelte](#usage-in-svelte)\n7. [Usage in React](#usage-in-react)\n8. [Demos](#demos)\n\n## Installation\n\n```\nns plugin add @nativescript-community/ui-persistent-bottomsheet\n```\n\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-persistent-bottomsheet';\ninstall();\n```\n\n## API\n\n### Properties\n\n| Property            | Default                           | Type                        | Description                                             |\n| ------------------- | --------------------------------- | --------------------------- | ------------------------------------------------------- |\n| bottomSheet          | `undefined`                       | `View`                      | View containing the content for the bottomsheet    |\n| gestureEnabled       | `true`                            | `boolean`                   | Boolean setting if swipe gestures are enabled           |\n| stepIndex            | `0`                            | `number`                   | the index of current step (mutable)           |\n| steps            | `[70]`                            | `number[]`                   | the different available steps           |\n| backdropColor        | `new Color('rgba(0, 0, 0, 0.7)')` | `Color`                     | The color of the backdrop behind the drawer             |\n\n\n\n### Methods\n\n| Name         | Return | Description                                     |\n| ------------ | ------ | ----------------------------------------------- |\n| install()    | `void` | Install gestures                                |\n\n## Usage in Angular\nImport the module into your project.\n\n```typescript\nimport { PBSModule } from \"@nativescript-community/ui-persistent-bottomsheet/angular\";\n\n@NgModule({\n    imports: [\n        PBSModule\n    ]\n    schemas: [\n        NO_ERRORS_SCHEMA\n    ]\n})\n\nexport class AppModule { }\n```\n\nThen in your component add the following:\n\n```xml\n<BottomSheet>\n    <StackLayout backgroundColor=\"white\">\n      <Label text=\"This is the main content\"></Label>\n    </StackLayout>\n    <GridLayout bottomSheet backgroundColor=\"white\" height=\"70\">\n      <Label text=\"This is the side drawer content\"></Label>\n    </GridLayout>\n\n   \n</BottomSheet>\n```\nFor a more complete example, look in the `demo-ng` directory.\n\n## Usage in Vue\n\nRegister the plugin in your `app.js`.\n\n```typescript\nimport BottomSheetPlugin from '~/components/drawer/vue';\nVue.use(BottomSheetPlugin);\n```\n\nThen in your component add the following:\n\n```xml\n<BottomSheet>\n    <StackLayout backgroundColor=\"white\">\n      <Label text=\"This is the main content\" />\n    </StackLayout>\n    <GridLayout ~bottomSheet backgroundColor=\"white\" height=\"70\">\n      <Label text=\"This is the side drawer content\" />\n    </GridLayout>\n\n</BottomSheet>\n```\nFor a more complete example, look in the `demo-vue` directory.\n\n## Usage in Svelte\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';\nBottomSheetElement.register();\n```\n\nThen in your component, add the following:\n\n```xml\n<bottomsheet>\n    <stacklayout  backgroundColor=\"white\">\n      <Label text=\"This is the main content\" />\n    </stacklayout>\n    <gridlayout prop:bottomSheet backgroundColor=\"white\" height=\"70\">\n      <Label text=\"This is the side drawer content\" />\n    </gridlayout>\n\n</bottomsheet>\n```\nFor a more complete example, look in the `demo-svelte` directory.\n\n## Usage in React\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';\nBottomSheetElement.register();\n```\n\nThen in your component, add the following:\n```ts\nimport { BottomSheet } from \"@nativescript-community/ui-persistent-bottomsheet/react\"\n```\n\n```xml\n<BottomSheet>\n  <stackLayout backgroundColor=\"white\">\n    <label text=\"This is the main content\" />\n  </stackLayout>\n  <gridLayout nodeRole=\"bottomSheet\" backgroundColor=\"white\" height=\"70\">\n    <label text=\"This is the side drawer content\" />\n  </gridLayout>\n\n</BottomSheet>\n```\nFor a more complete example, look in the `demo-react` directory.\n\n## Demos\nThis repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:\n```shell\n$ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet\n$ cd ui-drawer\n$ npm run i\n$ npm run setup\n$ npm run build && npm run build.angular\n$ cd demo-ng # or demo-vue or demo-svelte or demo-react\n$ ns run ios|android\n```","readmeFilename":"README.md"}