@nativescript-community/ui-persistent-bottomsheet

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

iOS Demo	Android Demo

Table of Contents

• Installation
• Configuration
• API
  • Properties
  • Methods
• Usage in Angular
• Usage in Vue
• Usage in Svelte
• Usage in React
• Demos
• Demos and Development
  • Setup
  • Build
  • Demos
• Questions

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

Methods

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.