nativescript-ng-bottomsheet
by Nikstn | v0.0.9
Nativescript Angular Bottom Sheet plugin
npm i --save nativescript-ng-bottomsheet
  • Version: 0.0.9
  • GitHub:
  • Downloads:
    • Last Day:   0
    • Last Week:  20
    • Last Month: 57

NativeScript Angular Bottom Sheet Plugin

Installation

tns plugin add nativescript-ng-bottomsheet

Usage

iOS note: Shadows will be added later. :(

The bottom sheet plugin extends a GridLayout and exposes a simple BottomSheet class with property state and method named setState(state). Also plugin exposes interface BottomSheetState that helps to manage state of Bottom Sheet.

XML

    <Page
navigatingTo="onNavigatingTo"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:ui="nativescript-ng-bottomsheet/ng-bottomsheet">


<ActionBar>
<Label text="Home"></Label>
</ActionBar>

<GridLayout>
<!-- Add your page content here -->
<ui:BottomSheet stateChange="onStateChange" />
</GridLayout>
</Page>

Angular

Don't forget to register the component in app.module.ts.

import { registerElement } from 'nativescript-angular/element-registry';
import { BottomSheet } from 'nativescript-ng-bottomsheet/ng-bottomsheet';
registerElement('BottomSheet', () => BottomSheet);

HTML

    <NgBottomSheet (stateChange)="onStateChange($event)"></NgBottomSheet>

Typescript

Typescript

    onStateChange(args) {
const {eventName, object, state} = args;
console.log(state); // it represents one of BottomSheetState values

// If you want to change state via code, use method setState()
// object.setState(BottomSheetState.COLLAPSED);
// object.setState(BottomSheetState.HALF_EXPANDED);
// object.setState(BottomSheetState.EXPANDED);
}

To run the Angular demo

cd src
npm run demo-angular.<platform>

To run the plain Nativescript demo

cd src
npm run demo.<platform>

License

MIT