tasty-toast v1.0.2
tasty-toast
The world's tastiest notification widget (Part of the tasty framework)
##Demo
You can find a small demo here.
##Installation
You can get it on npm.
npm install tasty-toast --saveOr bower, too.
bower install tasty-toast --saveIf you're not using either package manager, you can use tasty-toast by downloading the files in the dist folder.
####Including the JavaScript
Place tasty-toast in the end of <body>.
####Including the CSS
Place dist/tasty-toast.css or dist/tasty-toast.min.css in your document.
#Usage
tasty-toast provides the easiest possible API to make notifications breeze in your applications.
##Tasty.Toast(options)
You can provide options to customize tasty-toast. Here's an overview of the default values.
Tasty.Toast({
type: '', //['error','success','primary','secondary'] are possible values (or leave it empty for no theme)
icon: '', //Insert your image here
title: 'Hey there!',
content: `You didn't fill out the content.`,
duration: 6000,
onclick: null
});The options are detailed below.
####options.type
The options.type property will give the notification the correct appearance.
By default tasty-toast has no type. You can set the type of notification by setting the options.type property:
Tasty.Toast({
type: 'success'
});options.type accepts 'success' or 'error'
####options.icon
If you want to show an icon beside your notification just pass in an URL to an image like this:
Tasty.Toast({
icon: 'http://MYAWESOMEPAGE.com/COOLICON.png'
});options.icon accepts a string as input and ignores all other types.
####options.title
By default tasty-toast has "Hey there" as the title text. You can change the title text by sending them in to the options at initialization:
Tasty.Toast({
title: 'Hey there, something awsome happened!'
});options.title accepts a string as input and ignores all other types.
####options.content
By default tasty-toast has "You didn't fill out the content." as content. You can change the content by sending them in to the options at initialization:
Tasty.Toast({
content: 'You have recieved a <b>gift</b>.'
});options.content accepts a string as input. You can use HTML here... just sayin
####options.duration
By default tasty-toast has a duration of 6000 miliseconds. You can set your own duration by setting the duration property at initialization:
Tasty.Toast({
duration: 10000 // show me 10 seconds please
});options.duration accepts a number as input. The number represents the duration in miliseconds
####options.onclick
With options.onclick you can set a custom action when the notification object is clicked!
Tasty.Toast({
onclick: function(){
console.log('I do stuff...')
}
});options.onclick accepts a function as input
Great shoutout to Kent C. Dodds for providing great tutorials on how to write an open source library