nativescript-snackbarNativeScript plugin for Material Design Snackbar
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
评论
Material Design Icons
Google开源了MaterialDesign系统图标包其中的750个字形。该系统图标包含常用的图标,如用于媒体播放、通讯、内容编辑、连接等等。在Web应用,安卓和iOS设计均适用。图标格式包括:SV
Material Design Icons
0
JFoenixJavaFX Material Design 库
JFoenix是一个开放源代码Java库,它使用Java组件实现Google Material De
JFoenixJavaFX Material Design 库
0
JFoenixJavaFX Material Design 库
JFoenix是一个开放源代码Java库,它使用Java组件实现GoogleMaterialDesign。要构建JFoenix,执行以下命令:gradlewbuild运行请执行以下命令:gradlew
JFoenixJavaFX Material Design 库
0
Material Design 指南中文翻译
这是MaterialDesign指南的中文翻译项目。基于最新版的Google官方文档进行翻译,保留了所有原版文档的样式。Git@OSC: http://git.oschina.net/zdhxiong
Material Design 指南中文翻译
0
GoogleMaterialIconFontGoogle Material Design 图标
GoogleMaterialIconFont 是适用于Swift和ObjC项目的GoogleMaterialDesign图标。该库的灵感来自 FontAwesome.swift。使用Swiftimpo
GoogleMaterialIconFontGoogle Material Design 图标
0
GoogleMaterialIconFontGoogle Material Design 图标
GoogleMaterialIconFont 是适用于 Swift 和 ObjC 项目的 Googl
GoogleMaterialIconFontGoogle Material Design 图标
0
Material Design LiteHTML/CSS/JS 中的 Material Design 组件
MaterialDesignLite(MDL)允许你向静态内容网站添加MaterialDesign外观。它不依赖于任何JavaScript框架或库。并针对跨设备使用进行了优化,可在旧版浏览器中优雅地降
Material Design LiteHTML/CSS/JS 中的 Material Design 组件
0