JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q50139F
  • License MIT

A super simple colored angular snackbar module.

Package Exports

  • colored-snackbar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (colored-snackbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

colored-snackbar

A super simple customizable angular snackbar module. Allows user to display custom colored snackbar in angular application.

NPM

DEMO

Installation

Installing this module is pretty easy using npm:

npm install colored-snackbar

Then just add the dependencies into HTML and inject the coloredSnackbar module into your angular application module:

In your HTML

<link rel="stylesheet" href="node_modules/colored-snackbar/css/colored-snackbar.css">
<script src="node_modules/colored-snackbar/js/colored-snackbar.js"></script>

In your module.js

angular.module('myApp', ['coloredSnackbar']);

Usage

Use the colored snackbar attribute directive in any of your clickable element in your HTML.:

<button type="button" colored-snackbar message="Colored Snack Bar"
        back-color="black" font-color="yellow" snack-time="3000" position="top" ng-click="showSnackbar()">
    Top Snackbar
</button>

Customizable options:

<button type="button" colored-snackbar message="Colored Snack Bar"
        back-color="black" font-color="yellow" snack-time="3000" position="bottom" ng-click="showSnackbar()">
    Bottom Snackbar
</button>

Options / Attributes

  • message: [String] Message you want to display in snackbar.
  • back-color: [String] Background color of snackbar, can be HEX value.
  • font-color: [String] Font color of text in snackbar, can be HEX value.
  • position: [String] Position where you want to display snackbar, two available i.e ‘top’ and ‘bottom’.
  • snack-time: [Number] Display duration time of your snackbar. Default is 3 seconds.
  • showSnackbar: [Function] To trigger colored snackbar, use it with ngClick.

License

MIT