Have ideas to improve npm?Join in the discussion! »

    @nativescript-community/ui-material-bottomsheet
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.5 • Public • Published

    NativeScript Material Bottom sheet

    Material Design's Bottom sheet component for NativeScript.

    npm npm

    Contents

    1. Installation
    2. Changelog
    3. FAQ
    4. Usage

    Installation

    For NativeScript 7.0+

    • tns plugin add @nativescript-community/ui-material-bottomsheet

    For NativeScript 6.x

    • tns plugin add nativescript-material-bottomsheet

    If using tns-core-modules

    • tns plugin add nativescript-material-bottomsheet@2.5.4

    Be sure to run a new build after adding plugins to avoid any issues.

    Changelog

    FAQ

    Usage

    Plain NativeScript

    We need to do some wiring when your app starts, so open app.js and add this before creating any View/App/Frame:

    JavaScript

    var material = require("@nativescript-community/ui-material-bottomsheet");
    
    material.install();

    TypeScript

    import { install } from "@nativescript-community/ui-material-bottomsheet";
    install();

    Uses the same kind of API as NativeScript Modals.

    TS

    const modalViewModulets = "ns-ui-category/modal-view/basics/modal-ts-view-page";
    export function openBottomSheet(args) {
        const mainView: Button = <Button>args.object;
        const context = { username: "test_username", password: "test" };
        const fullscreen = true;
        mainView.showBottomSheet({
            view: modalViewModulets,
            context,
            closeCallback: (username, password) => {
                bottom-sheet
                alert(`Username: ${username} : Password: ${password}`);
            },
            fullscreen
        });
    }

    NativeScript + Vue

    import Vue from 'nativescript-vue';
    import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
    import { install } from "@nativescript-community/ui-material-bottomsheet";
    install();
    
    Vue.use(BottomSheetPlugin);

    Then you can show a Vue component:

    import MyComponent from 'MyComponent.vue';
    
    //inside another Vue component
    const options: BottomSheetOptions = {
    };
    this.$showBottomSheet(MyComponent, options)

    NativeScript + Angular

    First you need to include the NativeScriptMaterialBottomSheetModule in your app.module.ts

    import { NativeScriptMaterialBottomSheetModule} from "@nativescript-community/ui-material-bottomsheet/angular";
    
    @NgModule({
        imports: [
            // This will call the install method and inject a global service called BottomSheetService
            NativeScriptMaterialBottomSheetModule.forRoot()
        ],
        ...
    })

    now you can show your custom BottomSheet using the BottomSheetService, this service follows the same implementation as the ModalService

    ItemComponent

    import { Component,  ViewContainerRef } from '@angular/core';
    import { BottomSheetOptions, BottomSheetService } from '@nativescript-community/ui-material-bottomsheet/angular';
    import { ShareOptionsComponent } from './share-options.component';
    
    @Component({
        selector: 'ns-item',
        templateUrl: './item.component.html',
        moduleId: module.id
    })
    export class ItemComponent {
        constructor(
            private bottomSheet: BottomSheetService, 
            private containerRef: ViewContainerRef,
        ) {}
    
        showOptions() {
            const options: BottomSheetOptions = {
                viewContainerRef: this.containerRef,
                context: ['Facebook', 'Google', 'Twitter']
            };
    
            this.bottomSheet.show(ShareOptionsComponent, options).subscribe(result => {
                console.log('Option selected:', result);
            });
        }
    }

    ShareOptionsComponent

    <ListView
        [items]="options"
        (itemTap)="onTap($event)"
        separatorColor="white"
        class="list-group"
        height="200"
    >
        <ng-template let-option="item">
            <Label
                class="list-group-item"
                [text]="option"
            ></Label>
        </ng-template>
    </ListView>
    import { Component, OnInit } from '@angular/core';
    import { BottomSheetParams } from '@nativescript-community/ui-material-bottomsheet/angular';
    import { ItemEventData } from '@nativescript/core/ui/list-view';
    
    @Component({
        selector: 'ns-share-options',
        templateUrl: 'share-options.component.html'
    })
    export class ShareOptionsComponent implements OnInit {
        options: string[];
        
        // The BottomSheetService injects the BottomSheetParams to the component
        // so you can get the context and call the closeCallback method from the component displayed in your BottomSheet
        constructor(private params: BottomSheetParams) {}
    
        ngOnInit() {
            this.options = this.params.context;
        }
    
        onTap({ index }: ItemEventData) {
            this.params.closeCallback(this.options[index]);
        }
    }

    Install

    npm i @nativescript-community/ui-material-bottomsheet

    DownloadsWeekly Downloads

    580

    Version

    5.3.5

    License

    Apache-2.0

    Unpacked Size

    729 kB

    Total Files

    177

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar