NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.
| | |
| --- | ----------- |
| iOS Demo | Android Demo |
[](#table-of-contents)
## Table of Contents
* [Installation](#installation)
* [Configuration](#configuration)
* [API](#api)
* [Properties](#properties)
* [Methods](#methods)
* [Usage in Angular](#usage-in-angular)
* [Usage in Vue 3](#usage-in-vue-3)
* [Usage in Vue 2](#usage-in-vue-2)
* [Usage in Svelte](#usage-in-svelte)
* [Usage in React](#usage-in-react)
* [Demos](#demos)
* [Demos and Development](#demos-and-development)
* [Repo Setup](#repo-setup)
* [Build](#build)
* [Demos](#demos-1)
* [Contributing](#contributing)
* [Update repo ](#update-repo-)
* [Update readme ](#update-readme-)
* [Update doc ](#update-doc-)
* [Publish](#publish)
* [modifying submodules](#modifying-submodules)
* [Questions](#questions)
[](#installation)
## Installation
Run the following command from the root of your project:
`ns plugin add @nativescript-community/ui-persistent-bottomsheet`
[](#configuration)
## Configuration
For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):
```typescript
import { install } from '@nativescript-community/ui-persistent-bottomsheet';
install();
```
[](#api)
## API
### Properties
| Property | Default | Type | Description |
| ------------------- | --------------------------------- | --------------------------- | ------------------------------------------------------- |
| bottomSheet | `undefined` | `View` | View containing the content for the bottomsheet |
| gestureEnabled | `true` | `boolean` | Boolean setting if swipe gestures are enabled |
| stepIndex | `0` | `number` | the index of current step (mutable) |
| steps | `[70]` | `number[]` | the different available steps |
| backdropColor | `new Color('rgba(0, 0, 0, 0.7)')` | `Color` | The color of the backdrop behind the drawer |
### Methods
| Name | Return | Description |
| ------------ | ------ | ----------------------------------------------- |
| install() | `void` | Install gestures |
[](#usage-in-angular)
## Usage in Angular
Import the module into your project.
```typescript
import { PBSModule } from "@nativescript-community/ui-persistent-bottomsheet/angular";
@NgModule({
imports: [
PBSModule
]
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
```
Then in your component add the following:
```xml
```
For a more complete example, look in the `demo-ng` directory.
[](#usage-in-vue-3)
## Usage in Vue 3
Register the plugin in your `app.ts`.
```typescript
import BottomSheetPlugin from '@nativescript-community/ui-persistent-bottomsheet/vue3';
app.use(BottomSheetPlugin);
```
Then in your component add the following:
```xml
```
For a more complete example, look in the `demo-vue3` directory.
[](#usage-in-vue-2)
## Usage in Vue 2
Register the plugin in your `app.js`.
```typescript
import BottomSheetPlugin from '@nativescript-community/ui-persistent-bottomsheet/vue';
Vue.use(BottomSheetPlugin);
```
Add this at the top of your webpack config file:
```javascript
const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');
NsVueTemplateCompiler.registerElement('BottomSheet', () => require('@nativescript-community/ui-persistent-bottomsheet').BottomSheet, {
model: {
prop: 'stepIndex',
event: 'stepIndexChange'
}
});
```
Then in your component add the following:
```xml
```
For a more complete example, look in the `demo-vue` directory.
[](#usage-in-svelte)
## Usage in Svelte
Register the plugin in your `app.ts`.
```typescript
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
BottomSheetElement.register();
```
Then in your component, add the following:
```xml
```
For a more complete example, look in the `demo-svelte` directory.
[](#usage-in-react)
## Usage in React
Register the plugin in your `app.ts`.
```typescript
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
BottomSheetElement.register();
```
Then in your component, add the following:
```ts
import { BottomSheet } from "@nativescript-community/ui-persistent-bottomsheet/react"
```
```xml
```
For a more complete example, look in the `demo-react` directory.
[](#demos)
## Demos
This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:
```shell
$ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet
$ cd ui-drawer
$ npm run i
$ npm run setup
$ npm run build && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte or demo-react
$ ns run ios|android
```
[](#demos-and-development)
## Demos and Development
### Repo Setup
The repo uses submodules. If you did not clone with ` --recursive` then you need to call
```
git submodule update --init
```
The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
To develop and test:
if you use `yarn` then run `yarn`
if you use `pnpm` then run `pnpm i`
**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
```bash
npm run build.all
```
WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
### Demos
```bash
npm run demo.[ng|react|svelte|vue].[ios|android]
npm run demo.svelte.ios # Example
```
Demo 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]`
Instead you work in `demo-snippets/[ng|react|svelte|vue]`
You can start from the `install.ts` of each flavor to see how to register new demos
[](#contributing)
## Contributing
### Update repo
You can update the repo files quite easily
First update the submodules
```bash
npm run update
```
Then commit the changes
Then update common files
```bash
npm run sync
```
Then you can run `yarn|pnpm`, commit changed files if any
### Update readme
```bash
npm run readme
```
### Update doc
```bash
npm run doc
```
### Publish
The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
Simply run
```shell
npm run publish
```
### modifying submodules
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify `~/.gitconfig` and add
```
[url "ssh://git@github.com/"]
pushInsteadOf = https://github.com/
```
[](#questions)
## Questions
If 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).
| 
|
| --- | ----------- |
| iOS Demo | Android Demo |
[](#table-of-contents)
## Table of Contents
* [Installation](#installation)
* [Configuration](#configuration)
* [API](#api)
* [Properties](#properties)
* [Methods](#methods)
* [Usage in Angular](#usage-in-angular)
* [Usage in Vue 3](#usage-in-vue-3)
* [Usage in Vue 2](#usage-in-vue-2)
* [Usage in Svelte](#usage-in-svelte)
* [Usage in React](#usage-in-react)
* [Demos](#demos)
* [Demos and Development](#demos-and-development)
* [Repo Setup](#repo-setup)
* [Build](#build)
* [Demos](#demos-1)
* [Contributing](#contributing)
* [Update repo ](#update-repo-)
* [Update readme ](#update-readme-)
* [Update doc ](#update-doc-)
* [Publish](#publish)
* [modifying submodules](#modifying-submodules)
* [Questions](#questions)
[](#installation)
## Installation
Run the following command from the root of your project:
`ns plugin add @nativescript-community/ui-persistent-bottomsheet`
[](#configuration)
## Configuration
For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):
```typescript
import { install } from '@nativescript-community/ui-persistent-bottomsheet';
install();
```
[](#api)
## API
### Properties
| Property | Default | Type | Description |
| ------------------- | --------------------------------- | --------------------------- | ------------------------------------------------------- |
| bottomSheet | `undefined` | `View` | View containing the content for the bottomsheet |
| gestureEnabled | `true` | `boolean` | Boolean setting if swipe gestures are enabled |
| stepIndex | `0` | `number` | the index of current step (mutable) |
| steps | `[70]` | `number[]` | the different available steps |
| backdropColor | `new Color('rgba(0, 0, 0, 0.7)')` | `Color` | The color of the backdrop behind the drawer |
### Methods
| Name | Return | Description |
| ------------ | ------ | ----------------------------------------------- |
| install() | `void` | Install gestures |
[](#usage-in-angular)
## Usage in Angular
Import the module into your project.
```typescript
import { PBSModule } from "@nativescript-community/ui-persistent-bottomsheet/angular";
@NgModule({
imports: [
PBSModule
]
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
```
Then in your component add the following:
```xml