nativescript-snackbar

NativeScript plugin for Material Design Snackbar
授权协议 Apache-2.0 License
开发语言 Java
所属分类 手机/移动开发、 Android UI 组件
软件类型 开源软件
地区 不详
投 递 者 欧阳声
操作系统 Android
开源组织
适用人群 未知
 软件概览

NativeScript-Snackbar �� �� ��

NativeScript plugin for Material Design SnackBar component.

Action Build


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