Notifications

Simple notifs!

---

Live Example

---

Usage

Installation

Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="notifications.css">

Link to the JS file if you loaded phonon-core.js only:

<script src="notifications.js"></script>

RequireJS Compatible

require(['notifications'], function(notification)) {
    notification('#id').show();
});

Predefined Notification

phonon.notif(text, timeout, showButton, textButton);

Example:

phonon.notif('Hello', 3000, true, 'CANCEL');

You can also change the color. Example:

var notif = phonon.notif('Hello', 3000, true, 'CANCEL');
notif.setColor('positive');

You can retrieve the DOM element like this:

var notif = phonon.notif('Hello', 3000, true, 'CANCEL');
var element = notif.element; // DOM element

Custom Layout of Notifications

This is the default layout for a notification without a timeout.

<div class="notification" id="my-notif">
    <button class="btn pull-right icon icon-close" data-hide-notif="true"></button>
    Hello World!
</div>

This is the default layout for a notification with a timeout.

<div class="notification" id="my-notif" data-autodestroy="true" data-timeout="3000">
    <div class="progress">
        <div class="determinate"></div>
    </div>
    <button class="btn pull-right icon icon-close" data-hide-notif="true"></button>
    Hello World!
</div>

Show a Notification

var notif = phonon.notif('#id');
notif.show();

Hide a Notification

var notif = phonon.notif('#id');
notif.hide();

Change the color

You can change the default color (which is primary) with one of the following colors: positive or negative.

var notif = phonon.notif('#id');
notif.setColor('positive');
// notif.setColor('negative');

// then show
notif.show();

Get the DOM element

var notif = phonon.notif('#id');
var element = notif.element; // DOM element