Nativescript Custom Bottomsheet is a plugin that enable the show a custom beautiful actionsheet/bottomsheet.
npm install nativescript-custom-bottomsheet
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 |