Notification component for AngularJS. Renders a nice stack of various text messages.
bower install mgr-notifications<!doctype html>
<html lang="en">
<head>
<!-- ... -->
<link rel="stylesheet" href="./path/to/mgr-notifcations.css" />
<!-- ... -->
</head>
<body>
<!-- ... -->
<mgr-notifications ng-model="someController.notifications" permanent="true" sticky="true" position="top"></mgr-notifications>
<!-- ... -->
<script src="./path/to/mgr-notifications.js"></script>
</body>
</html>Required, contains an array of notification messages. If any present, shows them. Basically you just push strings into it, and the directive decorates them in a balloon-like fashion.
Optional, disabled by default. When set to true the dismiss buttons are disabled, so the notification cannot be closed by user.
Optional, disabled by default. When set to true the list appears at the top of the viewport rather than the place it's included.
Optional, set to top by default. Requires sticky to be true. Meaningful values are:
'top left' 'top' 'top right'
+--------------+
| |
'left' | viewport | 'right'
| |
+--------------+
'bottom left' 'bottom' 'bottom right'
As to notifications themseleves, they are simple objects:
var genericNotification = {
type: 'negative',
text: 'This is not how it works. This is not how any of this works.'
};The type is a predefined CSS class (automatically prefixed with mgr-) and can be:
default- generic notification (default one, no need to specify it explicitly)negativepositivewarning
...or anything else, just style it yourself.
The controller logic looks like this:
// No messages by default
someController.notifications = [];
// Generic notification
someController.notifications.push({
text: 'Your coffee is ready.'
});
// Something isn't right
someController.notifications.push({
type: 'negative',
text: 'You are doing it wrong.'
});
// Something nice just happened
someController.notifications.push({
type: 'positive',
text: 'Yay, changes saved.'
});
// Something requires additional attention.
someController.notifications.push({
type: 'warning',
text: 'Well, if I was you, I would not do what you are about to do.'
});For a proper example see demo/.