ToastrJS is a JavaScript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.
npm install toastr
Browser testing provided by BrowserStack.
#### Debug
- //cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css
#### Minified
- //cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js
- //cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css
#### NuGet Gallery
``
Install-Package toastr
#### Bower
`
bower install toastr
#### npm
`
npm install --save toastr
#### Ruby on Rails
`rubyGemfile
gem 'toastr-rails'
`
`coffeeapplication.coffee
#= require toastr
`
`scss
// application.scss
@import "toastr";
`
#### Animation Changes
The following animations options have been deprecated and should be replaced:
- Replace options.fadeIn with options.showDuration
- Replace with options.onShown
- Replace with options.hideDuration
- Replace with options.onHidden
1. Link to toastr.css
2. Link to toastr.js
3. use toastr to display a toast for info, success, warning or error
`js`
// Display an info toast with no title
toastr.info('Are you the 6 fingered man?')
js
// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
// Immediately remove current toasts without using animation
toastr.remove()
// Remove current toasts using animation
toastr.clear()
// Override global options
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})
`$3
In case you want to escape HTML characters in title and message toastr.options.escapeHtml = true;
$3
Optionally enable a close button
js
toastr.options.closeButton = true;
``Optionally override the close button's HTML.
js
toastr.options.closeHtml = '';
`You can also override the CSS/LESS for
Optionally override the hide animation when the close button is clicked (falls back to hide configuration).
js
toastr.options.closeMethod = 'fadeOut';
toastr.options.closeDuration = 300;
toastr.options.closeEasing = 'swing';
`$3
Show newest toast at bottom (top is default)
js
toastr.options.newestOnTop = false;
`$3
js
// Define a callback for when the toast is shown/hidden/clicked
toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
toastr.options.onclick = function() { console.log('clicked'); }
toastr.options.onCloseClick = function() { console.log('close button clicked'); }
`$3
Toastr will supply default animations, so you do not have to provide any of these settings. However you have the option to override the animations if you like.#### Easings
Optionally override the animation easing to show or hide the toasts. Default is swing. swing and linear are built into jQuery.
js
toastr.options.showEasing = 'swing';
toastr.options.hideEasing = 'linear';
toastr.options.closeEasing = 'linear';
`Using the jQuery Easing plugin (http://www.gsgd.co.uk/sandbox/jquery/easing/)
js
toastr.options.showEasing = 'easeOutBounce';
toastr.options.hideEasing = 'easeInBack';
toastr.options.closeEasing = 'easeInBack';
`#### Animation Method
Use the jQuery show/hide method of your choice. These default to fadeIn/fadeOut. The methods fadeIn/fadeOut, slideDown/slideUp, and show/hide are built into jQuery.
js
toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
toastr.options.closeMethod = 'slideUp';
`$3
Rather than having identical toasts stack, set the preventDuplicates property to true. Duplicates are matched to the previous toast based on their message content.
js
toastr.options.preventDuplicates = true;
`$3
Control how toastr interacts with users by setting timeouts appropriately. Timeouts can be disabled by setting them to 0.
js
toastr.options.timeOut = 30; // How long the toast will display without user interaction
toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it
`
$3
Visually indicate how long before a toast expires.
js
toastr.options.progressBar = true;
`$3
Flip the toastr to be displayed properly for right-to-left languages.
js
toastr.options.rtl = true;
`Building Toastr
To build the minified and css versions of Toastr you will need node installed. (Use Homebrew or Chocolatey.)
npm install -g gulp karma-cli
npm install
At this point the dependencies have been installed and you can build Toastr
- Run the analytics
- Run the test
- Run the build Contributing
For a pull request to be considered it must resolve a bug, or add a feature which is beneficial to a large audience.
Pull requests must pass existing unit tests, CI processes, and add additional tests to indicate successful operation of a new feature, or the resolution of an identified bug.
Requests must be made against the
branch. Pull requests submitted against the master` branch will not be considered.All pull requests are subject to approval by the repository owners, who have sole discretion over acceptance or denial.
+ http://twitter.com/John_Papa
Tim Ferrell
+ http://twitter.com/ferrell_tim
Hans Fjällemark
+ http://twitter.com/hfjallemark