Notification - Bootstrap Notify
Bootstrap Notify helps to turn standard bootstrap alerts into "growl" like notifications.
Page Demo Plugin WebsiteBasic Example
Basic Bootstrap Notify example with least options.
template
option is recommended for all notification types in order to provide the design elements correctly.$.notify({
message: 'Hello World'
},{
type: 'inverse',
allow_dismiss: true,
template: '<div data-notify="container" class="alert alert-dismissible alert-{0} alert--notify" role="alert">' +
'<span data-notify="icon"></span> ' +
'<span data-notify="title">{1}</span> ' +
'<span data-notify="message">{2}</span>' +
'<div class="progress" data-notify="progressbar">' +
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
'</div>' +
'<a href="{3}" target="{4}" data-notify="url"></a>' +
'<button type="button" aria-hidden="true" data-notify="dismiss" class="close"><span>×</span></button>' +
'</div>'
});
Placements
Control the placement of the notification by changing the placement
property.
placement
contains 2 addition sub properties: from
and align
which'll control the vertical position and the alignment repectively.
Usage
$.notify({
message: 'Hello World'
},{
type: 'inverse',
placement: {
from: 'top', // 'top' or 'bottom'
align: 'right' // 'left', 'center' or 'right',
},
allow_dismiss: true,
template: '<div data-notify="container" class="alert alert-dismissible alert-{0} alert--notify" role="alert">' +
'<span data-notify="icon"></span> ' +
'<span data-notify="title">{1}</span> ' +
'<span data-notify="message">{2}</span>' +
'<div class="progress" data-notify="progressbar">' +
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
'</div>' +
'<a href="{3}" target="{4}" data-notify="url"></a>' +
'<button type="button" aria-hidden="true" data-notify="dismiss" class="close"><span>×</span></button>' +
'</div>'
});
Notification Types
In addition to the default inverse
type, there are additional 4 different types which can be used for various notification entries.
info
success
warning
danger
Usage
Simply edit the type
property with the any of the above value to change the appearance of the notification.
$.notify({
message: 'Hello World'
},{
type: 'info', // 'inverse', 'success', or 'danger'
allow_dismiss: true,
template: '<div data-notify="container" class="alert alert-dismissible alert-{0} alert--notify" role="alert">' +
'<span data-notify="icon"></span> ' +
'<span data-notify="title">{1}</span> ' +
'<span data-notify="message">{2}</span>' +
'<div class="progress" data-notify="progressbar">' +
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
'</div>' +
'<a href="{3}" target="{4}" data-notify="url"></a>' +
'<button type="button" aria-hidden="true" data-notify="dismiss" class="close"><span>×</span></button>' +
'</div>'
});
Animations
For optional notification entrance and exit animation, you can add any in and out animation classes from animation.html
Following is an example with animation classes .fadeInDown
and fadeOutUp
$.notify({
message: 'Hello World'
},{
type: 'inverse', // 'inverse', 'info', 'success', or 'danger'
placement: {
from: 'top', // 'top' or 'bottom'
align: 'right' // 'left', 'center' or 'right',
},
allow_dismiss: true,
animate: {
enter: 'animated fadeInDown',
exit: 'animated fadeOutUp'
},
template: '<div data-notify="container" class="alert alert-dismissible alert-{0} alert--notify" role="alert">' +
'<span data-notify="icon"></span> ' +
'<span data-notify="title">{1}</span> ' +
'<span data-notify="message">{2}</span>' +
'<div class="progress" data-notify="progressbar">' +
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
'</div>' +
'<a href="{3}" target="{4}" data-notify="url"></a>' +
'<button type="button" aria-hidden="true" data-notify="dismiss" class="close"><span>×</span></button>' +
'</div>'
});
Requirements:
/vendors/bootstrap-notify/bootstrap-notify.min.js