https://github.com/bradmartin/nativescript-snackbar

:lollipop: :chocolate_bar: NativeScript plugin for Material Design SnackBar
https://github.com/bradmartin/nativescript-snackbar

android ios material-design nativescript nativescript-snackbar typescript

Last synced: about 2 months ago
JSON representation

:lollipop: :chocolate_bar: NativeScript plugin for Material Design SnackBar

• Host: GitHub
• URL: https://github.com/bradmartin/nativescript-snackbar
• Owner: bradmartin
• License: apache-2.0
• Archived: true
• Created: 2015-12-10T15:09:50.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-07-12T21:14:52.000Z (over 5 years ago)
• Last Synced: 2024-09-22T14:31:54.092Z (about 2 months ago)
• Topics: android, ios, material-design, nativescript, nativescript-snackbar, typescript
• Language: JavaScript
• Homepage:
• Size: 8.06 MB
• Stars: 73
• Watchers: 4
• Forks: 12
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
** DEPRECATION NOTICE **


## Package has been deprecated as of July 12th, 2019.

Please use the version published [by nStudio](https://github.com/nstudio/nativescript-snackbar).

### Installation:

`tns plugin add @nstudio/nativescript-snackbar`





    
NativeScript-Snackbar 🍭 🍫 🍦




NativeScript plugin for Material Design SnackBar component.


## Demo

![Snackbar](./screens/snackbar.gif)

## Installation

#### NativeScript 5.4 and older

`tns plugin add nativescript-snackbar`

## [Changelog](./CHANGELOG.md)

## Usage

### TS

```typescript

import { SnackBar, SnackBarOptions } from "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', // Optional, Android only

    snackText: this.get('snackText'),

    textColor: '#346db2', // Optional, Android only

    hideDelay: 3500,

    backgroundColor: '#eaeaea', // Optional, Android only

    maxLines: 3, // Optional, Android Only

    isRTL: false, // Optional, Android Only

    view: someView // Optional, Android Only, default to topmost().currentPage

  };

  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**