Nativescript Custom Bottomsheet !apple !android

[![Build Status][build-status]][build-url]

[build-status]:https://travis-ci.org/skhye05/nativescript-custom-bottomsheet.svg?branch=master
[build-url]:https://travis-ci.org/skhye05/nativescript-custom-bottomsheet

Overview

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

Installation

``javascript
tns plugin add nativescript-custom-bottomsheet
`

Usage

$3

#### xml

`xml
...



...
`

#### main-view-model.ts

`typescript
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);
}
}
`

$3

#### your.component.html

`html





`

#### your.component.ts

`typescript
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);
}
}

`

$3

#### app.js

#### your-component.vue

`html



`

API

$3

#### Methods

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

$3

#### Properties

| Property | Type | Description | Platforms |
|------------------|----------------------|---------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| icon | string | Set Bottomsheet header icon | !android !apple |
| title | string | Set Bottomsheet header title | !android !apple |
| items | Array | 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 |

$3

#### Properties

| Property | Type | Description | Platforms |
|----------|----------|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| icon | string | Set Bottomsheet item icon | !android !apple |
| title | string` | Set Bottomsheet item title | !android !apple |

Limitations

$3

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

Author

Jonathan Mayunga, mayunga.j@gmail.com

Credits

- For iOS LCActionSheet by Leo iTofu.

License

Apache License Version 2.0, January 2004