NativeScript-Snackbar
��
��
��
NativeScript plugin for Material Design SnackBar component.
Installation:
NativeScript 7+:tns plugin add @nstudio/nativescript-snackbar
NativeScript version prior to 7:tns plugin add @nstudio/nativescript-snackbar@1.1.2
Demo
Usage
TS
import { SnackBar, SnackBarOptions } from "@nstudio/nativescript-snackbar";
// Create an instance of SnackBar
const snackbar = new SnackBar();
/// Show a simple snackbar with no actions
public showSimple() {
snackbar.simple('Snackbar', 'red', '#fff', 3, false).then((args) => {
this.set('jsonResult', JSON.stringify(args));
})
}
/// Show an Action snack bar
public showAction() {
const options: SnackBarOptions = {
actionText: this.get('actionText'),
actionTextColor: '#ff4081',
snackText: this.get('snackText'),
textColor: '#346db2',
hideDelay: 3500,
backgroundColor: '#eaeaea',
maxLines: 3, // Optional, Android Only
isRTL: false,
view: <View>someView, // Optional, Android Only, default to topmost().currentPage
padding: number //Optional, iOS 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, maxLines?: number, isRTL?: boolean, view?: View): 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
- maxLines: number
- isRTL: boolean
- view: View
- padding: number
Run Demo
git clone https://github.com/nstudio/nativescript-snackbar.git
cd nativescript-snackbar/src
npm run build
npm run demo.ios
// or...
npm run demo.android
Changelog
Contributing
-
NativeScript 可以使用 Javascript，CSS, XML 创建真正的 Native 跨平台应用，支持 iOS Android，NativeScript 将您的跨平台代码翻译成目标平台的代码。 UI 使用 XML 描述，CSS 样式，在编译时将 UI 转化成本地原生代码,最终得到正在的 Native 原生应用。 Telerik 公开了用于创建安卓、iOS和Windows Unive
-
NativeScript Command-Line Interface The NativeScript CLI lets you create, build, and deploy NativeScript-based apps on iOS and Android devices. Get it using: npm install -g nativescript What is Native
-
Nativescript-Ripple This plugin aims to bring a native (or close to native) ripple implementation on Android and iOS. The android version uses a RippleDrawable and conserves the previous background, a
-
NativeScript-FloatingActionButton NativeScript plugin for Material Design Floating Action Button UI component. Installation Nativescript 7+: ns plugin add @nstudio/nativescript-floatingactionbutton Na
-
NativeScript CardView A NativeScript plugin to provide an XML widget to implement the Material Design CardView component. Installation NativeScript 7+: ns plugin add @nstudio/nativescript-cardview Nat
-
This project has moved: This project is now being maintained here: https://github.com/nativescript-community/ui-mapboxas it's become clear contrary to what I thought, I don't actually have enough time