Toast Transition

A toast allows users to be notified of an event

$.toast({
  message: 'I am a toast, nice to meet you !'
})
;

$.toast({
  title: 'Better ?',
  message: 'Hey look, I have a title !'
})
;

$.toast({
  title: 'LOOK',
  message: 'See, how long i will last',
  showProgress: 'bottom'
})
;

$.toast({
  title: 'LOOK',
  message: 'See, how long i will last',
  showProgress: 'bottom',
  classProgress: 'red'
})
;

$.toast({
  class: 'success',
  message: `You're using the good framework !`
})
;

$.toast({
  class: 'error',
  message: `An error occurred !`
})
;

$.toast({
  class: 'warning',
  message: `Behind you !`
})
;

$.toast({
  position: 'bottom right',
  message: `It's pretty cold down there...`
})
;

$.toast({
  position: 'top left',
  message: `Look, I'm here !`
})
;

$.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
})
;

$.toast({
  horizontal: true,
  position: 'top left',
  message: `Next one will open to the right`
})
;

$.toast({
    title: 'Veronika has joined',
    message: 'Welcome to the Fomantic-UI community!',
    class: 'center aligned', // you can also use 'centered'
})
;

$.toast({
  displayTime: 5000,
  message: `You will see me for 5 seconds.`
})
;

$.toast({
  displayTime: 0,
  message: `I'll stay here until you click on me !`
})
;

$.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'
  })
;

$.toast({
  title: 'Awesome',
  message: 'I got my style from the message class',
  class : 'purple',
  className: {
      toast: 'ui message'
  }
})
;

$.toast({
  title: 'LOOK',
  message: 'See, how long i will last',
  showProgress: 'top',
  progressUp: true
})
;

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'
})
;

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'
})
;

$.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;
    }
  }]
})
;

$.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'});
    }
  }]
})
;

$.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'});
      }
  }]
})
;

$.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'});
    }
  }]
})
;

$.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'});
    }
  }]
})
;

$.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'});
    }
  }]
})
;