Notice
A Toast can be generated out of existing DOM Nodes
Types
Minimal
A minimal toast will just display a message.
$.toast({
message: 'I am a toast, nice to meet you !'
})
;
Titled
You can add a title to your toast.
$.toast({
title: 'Better ?',
message: 'Hey look, I have a title !'
})
;
Progress Bar
You can attach a progress bar to your toast.
$.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'bottom'
})
;
The progress bar can have its own individual color
$.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'bottom',
classProgress: 'red'
})
;
Variations
Toast Type
A toast can be used to display different types of informations.
$.toast({
class: 'success',
message: `You're using the good framework !`
})
;
$.toast({
class: 'error',
message: `An error occurred !`
})
;
$.toast({
class: 'warning',
message: `Behind you !`
})
;
Position
A toast can appear at different positions on the screen.
$.toast({
position: 'bottom right',
message: `It's pretty cold down there...`
})
;
$.toast({
position: 'top left',
message: `Look, I'm here !`
})
;
Attached Position
A toast can have an attached position which will show the toast over the whole width of the screen. Just like notifications on mobile devices.
$.toast({
position: 'top attached',
title: 'Watch out!',
message: `I am a top attached toast`
})
;
$.toast({
position: 'bottom attached',
title: 'Watch out!',
message: 'I am a bottom attached toast',
newestOnTop: true
})
;
Direction
Toasts can stack horizontal
$.toast({
horizontal: true,
position: 'top left',
message: `Next one will open to the right`
})
;
Center Aligned
The toasts content can be shown center aligned.
$.toast({
title: 'Veronika has joined',
message: 'Welcome to the Fomantic-UI community!',
class: 'center aligned', // you can also use 'centered'
})
;
Duration
You can choose how long a toast should be displayed.
$.toast({
displayTime: 5000,
message: `You will see me for 5 seconds.`
})
;
You can even avoid a toast to disappear.
$.toast({
displayTime: 0,
message: `I'll stay here until you click on me !`
})
;
Setting the value to auto calculates the display time by the amount of containing words
$.toast({
displayTime: 'auto',
showProgress: 'top',
classProgress: 'blue',
message: 'The display time of this toast is calculated by its amount of containing words.
You can adjust the calculation by modifying the default values for minDisplayTime and wordsPerMinute' }) ;
You can adjust the calculation by modifying the default values for minDisplayTime and wordsPerMinute' }) ;
Use Message Style
You can use all of the styles and colors from the message component
$.toast({
title: 'Awesome',
message: 'I got my style from the message class',
class : 'purple',
className: {
toast: 'ui message'
}
})
;
Increasing Progress Bar
The progress bar could be be raised instead of lowered
$.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'top',
progressUp: true
})
;
Color Variants
You can use all of the usual color names
if(typeof document.suiToastColorIndex === 'undefined') {
document.suiToastColorIndex = -1;
}
var suiColors = ['red','orange','yellow','olive','green','teal','blue','violet','purple','pink','brown','grey','black'],
suiPlus = function(){
if (++document.suiToastColorIndex === suiColors.length) {
document.suiToastColorIndex = 0;
}
return document.suiToastColorIndex;
}
;
$.toast({
message: 'I am a colorful toast',
class : suiColors[suiPlus()], //cycle through all colors
showProgress: 'bottom'
})
;
Inverted Colors
Same as above, just add inverted to the class definition
if(typeof document.suiToastColorIndex === 'undefined') {
document.suiToastColorIndex = -1;
}
var suiColors = ['red','orange','yellow','olive','green','teal','blue','violet','purple','pink','brown','grey','black'],
suiPlus = function(){
if (++document.suiToastColorIndex === suiColors.length) {
document.suiToastColorIndex = 0;
}
return document.suiToastColorIndex;
}
;
$.toast({
message: 'I am an inverted colorful toast',
class : 'inverted ' + suiColors[suiPlus()], //cycle through all colors
showProgress: 'bottom'
})
;
Actions
General
Define click actions to your toast by providing a text and/or icon, optional class and click handler.
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
actions: [{
text: 'Yes',
icon: 'check',
class: 'green',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
},{
icon: 'ban',
class: 'icon red'
},{
text: '?',
class: 'blue',
click: function() {
$.toast({message:'Returning false from the click handler avoids closing the toast '});
return false;
}
}]
})
;
Basic
The classActions setting provides you a way to adjust the overall appearance of the action buttons. Using basic class does not lighten the actions background. left aligns the buttons to the left
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'basic left',
actions: [{
text: 'Yes, really',
class: 'yellow',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
}]
})
;
Centered
The actions buttons can also be shown centered
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'centered', // you can also use 'center aligned'
actions: [{
text: 'Yes, really',
class: 'yellow',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
}]
})
;
Attached
Using attached converts your actions into a Button group. Also add top to display the actions attached to the top of the toast
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'top attached',
actions: [{
text: 'Yes, really',
class: 'green',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
},{
text: 'Maybe later',
class: 'red',
click: function() {
$.toast({message:'You clicked "maybe", toast closes by default'});
}
}]
})
;
Vertical
You can use vertical to display your actions to the right of the toast.
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'vertical',
actions: [{
text: 'Yes, really',
class: 'green',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
},{
text: 'Maybe later',
class: 'red',
click: function() {
$.toast({message:'You clicked "maybe", toast closes by default'});
}
}]
})
;
Vertical attached
Vertical actions can also be displayed as button groups using vertical attached
Vertical attached actions also support left
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'left vertical attached',
actions: [{
text: 'Yes, really',
class: 'green',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
},{
text: 'Maybe later',
class: 'red',
click: function() {
$.toast({message:'You clicked "maybe", toast closes by default'});
}
}]
})
;
Examples
Without icon
You can choose to hide the status icon.
$.toast({
class: 'warning',
showIcon: false,
message: 'Hey, where is my icon ?'
})
;
Individual icon
Use whatever you like from the included FontAwesome gallery
$.toast({
class: 'info',
showIcon: 'microphone',
message: 'Listen to me'
})
;
Image
Provide an image path to display it just like the icon does.
Adjust the image via the separate classImage setting
$.toast({
showImage: 'https://fomantic-ui.com/images/avatar/small/veronika.jpg',
classImage: 'avatar',
message: `Veronika has joined the Fomantic-UI community`
})
;
The image can be shown without any padding by providing the image class New in 2.9.0
$.toast({
showImage: 'https://fomantic-ui.com/images/avatar/small/veronika.jpg',
class: 'image',
classImage: 'tiny',
message: `Veronika has joined the Fomantic-UI community`
})
;
Close Icon
You can force the user to click a close Icon instead of clicking anywhere on the toast to close it
$.toast({
class: 'info',
displayTime: 0,
closeIcon: true,
message: 'Click on the X to close me'
})
;
The close icon can also be displayed to the left New in 2.8.0
$.toast({
class: 'info',
displayTime: 0,
closeIcon: 'left',
message: 'Click on the X to close me'
})
;
Transitions
You can set other transitions types and durations.
$.toast({
class: 'success',
message: 'Did you notice any difference ?',
transition: {
showMethod : 'zoom',
showDuration : 1000,
hideMethod : 'fade',
hideDuration : 1000
}
})
;
Actions and centered and attached position
Using actions in attached position variants in combination with centered toast content does only support attached actions. This is because of the flexbox usage to align a possible icon/image next to the content.
$.toast({
title: 'Centered top attached',
message: 'I only support attached actions',
displayTime: 0,
position: 'top attached',
class: 'centered',
classActions: 'attached',
actions: [{
text: 'Mark as read',
class: 'grey'
},{
text: 'Delete',
class: 'red'
}]
})
;
Create from DOM
By creating your toasts out of existing DOM nodes you can make use of other existing FUI components
Toast
$('#domtoast')
.toast()
;
Template
You can reuse a dom template and provide its content via setting parameters
$('#domtemplate')
.toast({
title: 'Hello visitor #' + Math.random().toString(36).substr(2),
message: 'Message ID: '+ Math.random().toString(36).substr(2),
showImage: 'https://fomantic-ui.com/images/avatar/small/zoe.jpg'
})
;
Approve / Deny Callbacks
Just like Modal, Toast will automatically tie approve/deny callbacks to any positive/approve, negative/deny or ok/cancel buttons without the need to create actions via setting
Notice
Want to close this DOM toast?
$('#domtoastactions')
.toast({
displayTime: 0,
onDeny : function(){
$.toast({message:'Wait not yet!'});
return false;
},
onApprove : function() {
$.toast({message:'Approved'});
}
})
;
Message
$('#dommessage')
.toast()
;
Card
Fomantic-UI
$('#domcard')
.toast()
;
Interaction
Prevent pausing
The default behavior when hovering over the toast is to pause decreasing of the display time.
You can force the toast to not pause by setting pauseOnHover to false
$.toast({
message: 'This toast does not pause when you hover on it',
pauseOnHover: false,
showProgress: 'top'
});
Prevent closing
The default behavior when clicking on a toast is to close it.
You can force the toast to not do this by setting closeOnClick to false
$.toast({
message: 'This toast does not close when you click on it',
closeOnClick: false,
showProgress: 'top'
});
Access created toast
As each call to .toast() returns the instance of the created toast, you are able to interact with the displayed toast via javascript behaviors
var myToast = $.toast();
var remainingTime = myToast.toast('get remainingTime');
Appearance
Migration from 2.7.0
The toast defaults changed in 2.8.0. In case you want to keep the old defaults for all of your toasts, override the defaults as follows
/* To change the defaults for all toast at once override the module as follows
$.fn.toast.settings.progressUp = true;
$.fn.toast.settings.class = 'info';
$.fn.toast.settings.showIcon = true;
$.fn.toast.settings.className.box = 'toast-box'; //removes shadow
$.fn.toast.settings.className.title = 'header'; // smaller font size
$.fn.toast.settings.className.icon = 'icon'; // top position again
$.fn.toast.settings.transition.closeEasing = 'easeOutBounce';
*/
// Or apply the old defaults directly to the toast
$.toast({
title: 'LOOK',
message: 'Turned back time to 2.7.0 defaults',
showProgress: 'bottom',
//make it look like 2.7.0
showIcon: true,
progressUp: true,
class: 'info',
className: {
box:'toast-box',
title:'header',
icon: 'icon'
},
transition: {
closeEasing: 'easeOutBounce'
}
})
;
General HTML Layout
The general layout of a rendered toast might be useful for people who want to implement their own javascript display logic and just want to reuse Fomantics HTML CSS Layout.
The following structure is used to position the toasts. Each position container implements a toast-box per toast. The extra wrapper is needed to make dynamic elements like progressbar independent of the toast layout.
A single toast layout inside the above mentioned toast-box has the following structure
Toast Header
Toast content
Behaviors
All the following behaviors can be called using the syntax:
$('.ui.toast').toast('behavior', argumentOne, argumentTwo...);
| Behavior | Description |
|---|---|
| animate pause | Pauses the display time decrease (and possible progress bar animation) |
| animate continue | Continues decreasing display time (and possible progress bar animation) |
| close | Closes the toast |
| get toasts | Returns all toasts as an array of objects which are visible within the current toast-container |
| get remainingTime | Returns the remaining time in milliseconds |
| destroy | Destroys instance and removes all events |
Settings
Toast Settings
Settings to configure toast behavior
| Setting | Default | Description |
|---|---|---|
| position | top right | Sets where the toast can be displayed. Can be top right, top center, top left, bottom right, bottom center, bottom left and centered |
| horizontal | false | If the toasts should stack horizontal instead of vertical |
| class | neutral | Define the class of notification. Can be any existing color definition or info, success, warning and error. If ui message is used in className.toast option (see below), this option can hold any supported class of the message component |
| classProgress | false | Can hold a string to be added to the progress bar class, for example a separate color |
| classActions | false | Can hold a string to be added to the actions class to control its appearance. Usually a combination of basic, left, top, bottom, vertical and attached |
| classImage | mini | Can hold a string to be added to the image class. mini, tiny, small and avatar are supported out of the box |
| context | body | Selector or jquery object specifying the area to attach the toast container to |
| displayTime | 3000 | Set the time (in ms) of the toast appearance. Set 0 to disable the automatic dismissal. Set auto to calculate the time by the given amount of words within the toast |
| minDisplayTime | 1000 | Minimum display time in case displayTime is set to 'auto' |
| wordsPerMinute | 120 | Base to calculate display time in case displayTime is set to 'auto' |
| showImage | false | If an URL to an image is given, that image will be shown to the left of the toast |
| showIcon | true | Define if the toast should display an icon which matches to a given class. If a string is given, this will be used as icon classname |
| closeIcon | false | This will make the toast closable by the top right corner icon instead of clicking anywhere on the toast when set to true. When set to left the closeIcon is shown to the left instead of right |
| closeOnClick | true | Set to false to avoid closing the toast when it is clicked |
| cloneModule | true | If a given DOM-Node should stay reusable by using a clone of it as toast. If set to false the original DOM-Node will be detached and removed from the DOM then the toast is closed |
| showProgress | false | Displays a progress bar on top or bottom increasing until displayTime is reached. . false won't display any progress bar. If displayTime option is 0, this option is ignored |
| progressUp | false | trueIncreases the progress bar from 0% to 100%false Decreases the progress bar from 100% to 0% |
| pauseOnHover | true | Set to false if the display timer should not pause when the toast is hovered |
| compact | true | true will display the toast in a fixed width, false displays the toast responsively with dynamic width |
| opacity | 1 | Opacity Value of the toast after the show-transition |
| newestOnTop | false | Define if new toasts should be displayed above the others |
| preserveHTML | true | Whether HTML included in given title, message or actions should be preserved. Set to false in case you work with untrusted 3rd party content |
| transition |
transition: {
showMethod : 'scale',
showDuration : 500,
hideMethod : 'scale',
hideDuration : 500,
closeEasing : 'easeOutCubic',
closeDuration: 500,
}
|
Settings to set the transitions and durations during the show or the hide of a toast |
Callbacks
Callbacks specify a function to occur after a specific behavior.
| Parameters | Description | |
|---|---|---|
| onShow | $module | Callback before toast is shown. Returning false from this callback will cancel the toast from showing. |
| onVisible | $module | Callback after toast is shown. |
| onClick | $module | Callback after popup is clicked in. |
| onHide | $module | Callback before toast is hidden. Returning false from this callback will cancel the toast from hiding. |
| onHidden | $module | Callback after toast is hidden. |
| onRemove | $module | Callback before toast is destroyed. |
| onApprove | $module | Callback when an existing button with class positive or ok or approve is clicked. Return false to avoid closing the toast |
| onDeny | $module | Callback when an existing button with class negative or cancel or deny is clicked. Return false to avoid closing the toast |
Content Settings
Settings to specify toast contents
| Setting | Description |
|---|---|
| title | A title for the toast. Leave empty to not display it |
| message | Message to display |
| actions | An array of objects. Each object defines an action with properties text,class,icon and click
actions: [{
text : 'Wait',
class : 'red',
icon : 'exclamation',
click : function(){}
}]
|
DOM Settings
DOM settings specify how this module should interface with the DOM
| Setting | Default | Description |
|---|---|---|
| namespace | toast | Event namespace. Makes sure module teardown does not effect other events attached to an element. |
| selector |
selector : {
container : '.ui.toast-container',
box : '.toast-box',
toast : '.ui.toast',
title : '.header',
message : '.message:not(.ui)',
image : '> img.image, > .image > img',
icon : '> i.icon',
input : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
clickable : 'a, details, .ui.accordion',
approve : '.actions .positive, .actions .approve, .actions .ok',
deny : '.actions .negative, .actions .deny, .actions .cancel'
}
|
DOM Selectors used internally |
| className |
className : {
container : 'ui toast-container',
absolute : 'absolute',
box : 'floating toast-box',
progress : 'ui attached active progress',
toast : 'ui toast',
icon : 'centered icon',
visible : 'visible',
content : 'content',
title : 'ui header',
message : 'message',
actions : 'actions',
extraContent : 'extra content',
button : 'ui button',
buttons : 'ui buttons',
close : 'close icon',
image : 'ui image',
vertical : 'vertical',
horizontal : 'horizontal',
attached : 'attached',
inverted : 'inverted',
compact : 'compact',
pausable : 'pausable',
progressing : 'progressing',
top : 'top',
bottom : 'bottom',
left : 'left',
basic : 'basic',
unclickable : 'unclickable',
}
|
Class names used to attach style to state |
| icons |
icons : {
info : 'info',
success : 'checkmark',
warning : 'warning',
error : 'times'
}
|
Icon names used internally |
| text |
text : {
close : 'Close'
}
|
Display strings |
Debug Settings
Debug settings controls debug output to the console
| Setting | Default | Description |
|---|---|---|
| name | Toast | Name used in debug logs |
| silent | false | Silences all console output including error messages, regardless of other debug settings. |
| debug | false | Provides standard debug output to console |
| performance | true | Provides standard debug output to console |
| verbose | false | Provides ancillary debug output to console |
| errors |
error: {
method : 'The method you called is not defined.',
noElement : 'This module requires ui transitions.',
verticalCard : 'Vertical but not attached actions are not supported for card layout'
}
|
|