Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Costa Caravotas Costa Caravotas
Costa Caravotas and Costa Caravotas added ios gif
Latest commit 72c56ad Apr 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github first commit Mar 26, 2019
demo-ng added e2e ui testing Apr 16, 2019
demo-vue added e2e ui testing Apr 16, 2019
demo added ios gif Apr 16, 2019
publish update Redame and Travis Apr 15, 2019
res added demos ng and vue Apr 15, 2019
src added e2e ui testing Apr 16, 2019
.gitignore Update Package Apr 15, 2019
.travis.yml update Redame and Travis Apr 15, 2019
LICENSE first commit Mar 26, 2019
README.md update Redame and Travis Apr 15, 2019
android.gif added e2e ui testing Apr 16, 2019
ios.gif added ios gif Apr 16, 2019
re.sh updated packages.json Apr 15, 2019
tslint.json first commit Mar 26, 2019

README.md

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

You can’t perform that action at this time.