Django Notify
-
Pro Component
The Django Notify is a beautiful, responsive, customisable, accessible replacement for Javascript’s popup boxes. This plugin helps to turn standard Django alerts into "growl" like notifications. Keep reading our Django Notify examples and learn how to use this plugin.
Usage
CSS
In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:
<link rel= "stylesheet" href= "assets/vendor/animate.css/animate.min.css" >
JS
In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:
<script src= "assets/vendor/bootstrap-notify/bootstrap-notify.min.js" ></script>
Initialization
Please read the official documentation to see the complete list of options and methods.
Examples
Top Left
Top Center
Top Right
Bottom Left
Bottom Center
Bottom Right
<button class= "btn btn-default" data-toggle= "notify" data-placement= "top" data-align= "left" data-type= "default" data-icon= "ni ni-bell-55" > Top Left</button>
<button class= "btn btn-default" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "default" data-icon= "ni ni-bell-55" > Top Center</button>
<button class= "btn btn-default" data-toggle= "notify" data-placement= "top" data-align= "right" data-type= "default" data-icon= "ni ni-bell-55" > Top Right</button>
<button class= "btn btn-default" data-toggle= "notify" data-placement= "bottom" data-align= "left" data-type= "default" data-icon= "ni ni-bell-55" > Bottom Left</button>
<button class= "btn btn-default" data-toggle= "notify" data-placement= "bottom" data-align= "center" data-type= "default" data-icon= "ni ni-bell-55" > Bottom Center</button>
<button class= "btn btn-default" data-toggle= "notify" data-placement= "bottom" data-align= "right" data-type= "default" data-icon= "ni ni-bell-55" > Bottom Right</button>
Colors
Info
Success
Warning
Danger
<button class= "btn btn-info" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "info" data-icon= "ni ni-bell-55" > Info</button>
<button class= "btn btn-success" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "success" data-icon= "ni ni-bell-55" > Success</button>
<button class= "btn btn-warning" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "warning" data-icon= "ni ni-bell-55" > Warning</button>
<button class= "btn btn-danger" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "danger" data-icon= "ni ni-bell-55" > Danger</button>
Custom animations
For more animation you can check out the Anime.css library. Simply copy and paste the in/out animation class and add ii on the data-animation-in
and data-animation-out
.
fadeIn
fadeInDown
bounceIn
flipInX
zoomIn
<button class= "btn btn-default" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "default" data-icon= "ni ni-bell-55" data-animation-in= "animated fadeIn" data-animation-out= "animated fadeOut" > fadeIn</button>
<button class= "btn btn-default" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "default" data-icon= "ni ni-bell-55" data-animation-in= "animated fadeInDown" data-animation-out= "animated fadeOutUp" > fadeInDown</button>
<button class= "btn btn-default" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "default" data-icon= "ni ni-bell-55" data-animation-in= "animated bounceIn" data-animation-out= "animated bounceOut" > bounceIn</button>
<button class= "btn btn-default" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "default" data-icon= "ni ni-bell-55" data-animation-in= "animated flipInX" data-animation-out= "animated flipOutX" > flipInX</button>
<button class= "btn btn-default" data-toggle= "notify" data-placement= "top" data-align= "center" data-type= "default" data-icon= "ni ni-bell-55" data-animation-in= "animated zoomIn" data-animation-out= "animated zoomOut" > zoomIn</button>