@bigin/ui-persistent-bottomsheet

NativeScript BottomSheet

NativeScript plugin that allows you to easily add persistent bottomsheet to your projects.

Table of Contents

• Installation
• Configuration
• API
• Usage in Angular
• Usage in Vue
• Usage in Svelte
• Usage in React
• Demos

Installation

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);

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