Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@nativescript-community/ui-material-snackbar

5.0.28 • Public • Published

npm npm GitHub forks GitHub stars

Nativescript Material SnackBar

Use the Material Design Snackbars in your {N} app

Material Design Spec

Installation

Warning ⚠️ ⚠️

From 5.x using material component will break N tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or tabs (clone of N one, but with a little less features)

For N 7.0

  • tns plugin add @nativescript-community/ui-material-snackbar

For N 6.x

  • tns plugin add nativescript-material-snackbar

If using tns-core-modules

  • tns plugin add nativescript-material-snackbar@2.5.4

Be sure to run a new build after adding plugins to avoid any issues.

Usage

TS

import { SnackBar } from '@nativescript-community/ui-material-snackbar';
 
const snackbar = new SnackBar();
 
export function showSimpleSnackbar() {
    snackbar.simple(`I'm a simple snackbar`).then(result => console.log('Simple Snackbar:', result));
}
 
export function showActionSnackbar() {
    snackbar
        .action({
            message: `I'm a snackbar with an action`,
            actionText: 'Dismiss',
            hideDelay: 2000
        })
        .then(result => console.log('Action Snackbar:', result));
}
 
export function showColorfulSnackbar() {
    snackbar
        .action({
            message: `I'm a colorful snackbar`,
            textColor: 'blue',
            actionTextColor: 'yellow',
            backgroundColor: 'green',
            actionText: 'Dismiss',
            hideDelay: 2000
        })
        .then(result => console.log('Action Snackbar:', result));
}
 

Install

npm i @nativescript-community/ui-material-snackbar

DownloadsWeekly Downloads

239

Version

5.0.28

License

Apache-2.0

Unpacked Size

102 kB

Total Files

19

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar