npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

nativescript-custom-bottomsheet

1.0.6 • Public • Published

Nativescript Custom Bottomsheet apple android

npm npm Build Status

Overview

Nativescript Custom Bottomsheet is a plugin that enable the show a custom beautiful actionsheet/bottomsheet.

Installation

tns plugin add nativescript-custom-bottomsheet

Usage

TypeScript

xml

...
    <StackLayout class="p-20">
        <Button text="show" class="t-20 text-center c-black" tap="{{ onTap }}"/>
    </StackLayout>
...

main-view-model.ts

import { Observable } from 'tns-core-modules/data/observable';
import { CustomBottomsheet, CBSheetOption } from 'nativescript-custom-bottomsheet';
 
export class HelloWorldModel extends Observable {
  private customBottomsheet: CustomBottomsheet;
 
  constructor() {
    super();
    this.customBottomsheet = new CustomBottomsheet();
  }
 
  public onTap(): void {
    const options: CBSheetOption = {
      icon: 'contact',
      title: 'John Doe',
      items: [{
        icon: 'call',
        title: 'Make a call'
      },
      {
        icon: 'sms',
        title: 'Send a text message'
      },
      {
        icon: 'email',
        title: 'Send an email'
      },
      {
        icon: 'comments',
        title: 'Leave a comment'
      },
      {
        icon: 'delete',
        title: 'Delete contact'
      }
      ],
      onItemTap: (index, item) => {
        console.log('index', index);
      },
      cancelButtonText: 'Cancel'
    };
 
    this.customBottomsheet.show(options);
  }
}

Angular

your.component.html

<GridLayout class="page">
    <StackLayout class="p-20">
        <Button text="show" class="t-20 text-center c-black" (tap)="onTap()"></Button>
    </StackLayout>
</GridLayout>

your.component.ts

import { Component, OnInit } from "@angular/core";
import { OnTabSelectedEventData, BubbleNavigationItem } from 'nativescript-custom-bottomsheet';
 
@Component({
    ...
})
export class YourComponent implements OnInit {
    private customBottomsheet: CustomBottomsheet;
 
    constructor() {
        this.customBottomsheet = new CustomBottomsheet();
    }
 
    ngOnInit(): void {
        ...
    } 
    
    public onTap(): void {
        const options: CBSheetOption = {
            icon: 'contact',
            title: 'John Doe',
            items: [{
                icon: 'call',
                title: 'Make a call'
            },
            {
                icon: 'sms',
                title: 'Send a text message'
            },
            {
                icon: 'email',
                title: 'Send an email'
            },
            {
                icon: 'comments',
                title: 'Leave a comment'
            },
            {
                icon: 'delete',
                title: 'Delete contact'
            }
            ],
            onItemTap: (index, item) => {
                console.log('index', index);
            }
            cancelButtonText'Cancel'
        };
 
        this.customBottomsheet.show(options);
    }
}
 

Vue

app.js

your-component.vue

<template>
  <Page class="page">
    ...
 
    <GridLayout>
      <StackLayout class="p-20">
        <Button text="show" class="t-20 text-center c-black" @tap="onTap"></Button>
      </StackLayout>
    </GridLayout>
  </Page>
</template>
 
<script>
import {
  CustomBottomsheet
} from "nativescript-custom-bottomsheet";
 
const customBottomsheet = new CustomBottomsheet();
 
export default {
  methods: {
    onTap() {
      const options = {
        icon: "contact",
        title: "John Doe",
        items: [
          {
            icon: "call",
            title: "Make a call"
          },
          {
            icon: "sms",
            title: "Send a text message"
          },
          {
            icon: "email",
            title: "Send an email"
          },
          {
            icon: "comments",
            title: "Leave a comment"
          },
          {
            icon: "delete",
            title: "Delete contact"
          }
        ],
        onItemTap: (index, item) => {
          console.log("index", index);
        },
        cancelButtonText: 'Cancel'
      };
 
      this.customBottomsheet.show(options);
    }
  }
};
</script> 

API

CustomBottomsheet

Methods

Property Type Description Platforms
show(options: CBSheetOption) Void Show Bottomsheet android apple

CBSheetOption

Properties

Property Type Description Platforms
icon string Set Bottomsheet header icon android apple
title string Set Bottomsheet header title android apple
items Array<CBSheetItem> Set Bottomsheet item's icon and title android apple
onItemTap Callback Function Call when an item is clicked and pass the index of the clicked item and it's properties e.g. icon and title android apple
cancelButtonText string Set the cancel button text on iOS apple

CBSheetItem

Properties

Property Type Description Platforms
icon string Set Bottomsheet item icon android apple
title string Set Bottomsheet item title android apple

Limitations

iOS

Currently on ios adding more than four tabs will ressort having your text animations cut.

Author

Jonathan Mayunga, mayunga.j@gmail.com

Credits

License

Apache License Version 2.0, January 2004

install

npm i nativescript-custom-bottomsheet

Downloadsweekly downloads

10

version

1.0.6

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability