NativeScript Snackbar 🍭 🍫
Use the Material Design Snackbar in your {N} app, iOS uses SSSnackbar Cocoapod
Snackbar Usage
Installation
tns plugin add nativescript-snackbar
Requires Xcode 9+ to build for iOS, so update Xcode if needed.
Usage
TS
import { SnackBar, SnackBarOptions } from "nativescript-snackbar";
// Create an instance of SnackBar
let snackbar = new SnackBar();
/// Show a simple snackbar with no actions
public showSimple() {
snackbar.simple('Snackbar', 'red', '#fff').then((args) => {
this.set('jsonResult', JSON.stringify(args));
})
}
/// Show an Action snack bar
public showAction() {
let options: SnackBarOptions = {
actionText: this.get('actionText'),
actionTextColor: '#ff4081', // Optional, Android only
snackText: this.get('snackText'),
hideDelay: 3500,
textColor: '#346db2', // Optional, Android only
backgroundColor: '#eaeaea' // Optional, Android only
};
snackbar.action(options).then((args) => {
if (args.command === "Action") {
this.set('jsonResult', JSON.stringify(args));
} else {
this.set('jsonResult', JSON.stringify(args));
}
});
}
API
Show a simple SnackBar (color args will only work on Android)
- simple(snackText: string, textColor?: string, backgroundColor?: string): Promise
Show a SnackBar with Action.
- action(options: SnackBarOptions): Promise
Manually dismiss an active SnackBar
- dismiss(): Promise
SnackBarOptions Interface
- actionText: string
- actionTextColor: string
- snackText: string
- hideDelay: number
- textColor: string
- backgroundColor: string
Contributors
- Steve McNiven-Scott @stevemcniven
- Nathanael Anderson @CongoCart
- Marc Buils MarcBuils
- Davor Peic @davorpeic
- Eddy Verbruggen @eddyverbruggen