@nativescript-community/ui-persistent-bottomsheet
NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.
npm i --save @nativescript-community/ui-persistent-bottomsheet

@nativescript-community/ui-persistent-bottomsheet

Downloads per month NPM Version

NativeScript plugin that allows you to easily add a persistent bottomsheet 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-persistent-bottomsheet

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-persistent-bottomsheet';
install();

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

Import the module into your project.

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:

<BottomSheet>
<StackLayout backgroundColor="white">
<Label text="This is the main content"></Label>
</StackLayout>
<GridLayout bottomSheet backgroundColor="white" height="70">
<Label text="This is the side drawer content"></Label>
</GridLayout>


</BottomSheet>

For a more complete example, look in the demo-ng directory.

Usage in Vue

Register the plugin in your app.js.

import BottomSheetPlugin from '~/components/drawer/vue';
Vue.use(BottomSheetPlugin);

Add this at the top of your webpack config file:

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:

<BottomSheet>
<StackLayout backgroundColor="white">
<Label text="This is the main content" />
</StackLayout>
<GridLayout ~bottomSheet backgroundColor="white" height="70">
<Label text="This is the side drawer content" />
</GridLayout>

</BottomSheet>

For a more complete example, look in the demo-vue directory.

Usage in Svelte

Register the plugin in your app.ts.

import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
BottomSheetElement.register();

Then in your component, add the following:

<bottomsheet>
<stacklayout backgroundColor="white">
<Label text="This is the main content" />
</stacklayout>
<gridlayout prop:bottomSheet backgroundColor="white" height="70">
<Label text="This is the side drawer content" />
</gridlayout>

</bottomsheet>

For a more complete example, look in the demo-svelte directory.

Usage in React

Register the plugin in your app.ts.

import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
BottomSheetElement.register();

Then in your component, add the following:

import { BottomSheet } from "@nativescript-community/ui-persistent-bottomsheet/react"
<BottomSheet>
<stackLayout backgroundColor="white">
<label text="This is the main content" />
</stackLayout>
<gridLayout nodeRole="bottomSheet" backgroundColor="white" height="70">
<label text="This is the side drawer content" />
</gridLayout>

</BottomSheet>

For a more complete example, look in the demo-react directory.

Demos

This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your 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

Setup

To run the demos, you must clone this repo recursively.

git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet.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.