cs

colored-snackbar

A super customizable angular snackbar module

Showing:

Popularity

Downloads/wk

17

GitHub Stars

1

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Angular Toast

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100