Material Design SnackBar 组件的 NativeScript 插件。

安装

NativeScript 7+：tns plugin add @nstudio/nativescript-snackbar

NativeScript 7之前的版本：tns plugin add @nstudio/[email protected]

演示

用法

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

显示一个简单的 SnackBar（颜色参数仅在 Android 上有效）

• simple(snackText: string, textColor?: string, backgroundColor?: string, maxLines?: number, isRTL?: boolean, view?: View): Promise

显示带有动作的 SnackBar。

• action(options: SnackBarOptions): Promise

手动关闭活动 SnackBar

• dismiss(): Promise

SnackBarOptions 接口

• actionText: string
• actionTextColor: string
• snackText: string
• hideDelay: number
• textColor: string
• backgroundColor: string
• maxLines: number
• isRTL: boolean
• view: View
• padding: number

运行演示

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

变更日志

贡献