Alerts & Notifications

Toasts

For Bootstrap toasts please refer to its documentation.

In Ace there's an aceToaster function that creates a toast element and displays it:

var newToast = $.aceToaster.add({
    placement: 'tr',
    title: 'This is a sample notice!',
    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',

    icon: '<i class="far fa-lightbulb fa-2x text-blue ml-2 mr-1"></i>',

    className: 'bgc-white-tp2 brc-secondary-tp4 rounded-sm',
    headerClass: 'bg-transparent border-0 text-120 text-dark-m3 font-bolder',
    bodyClass: 'pt-0'
});

Options

The following options are available:

progress

Is an HTML string representing classname of an element that will be inserted as progress bar for toast

$.aceToaster.add({
  progress: 'position-bl bgc-black-tp6 py-2px m-1px'
  // bgc-black-tp6 color
  // position-bl means will be on bottom left
  // py-2px means height will be 4px ... 
  ...
})

progressReverse

If true, direction of progress will be reversed

$.aceToaster.add({
  progress: 'position-bl bgc-white-tp4 py-2px m-1px',
  progressReverse: true
});

placement

which can have the following values:

• t or top top
• tc top-center
• tr top-right
• tl top-left
• b or bottom bottom
• bc bottom-center
• br bottom-right
• bl bottom-left
• r or rigt right
• rc right center (middle)
• l or left left
• lc left center (middle)
• c or center center

belowNav

Toast element will appear below navbar

width

Specify width

className

Toast element's class names

headerClass

Toast header's class names

title

Title. Can be a string or a function. No sanitization is performed

titleClass

Title's class names

body

Toast content/body. Can be a string or a function. No sanitization is performed

bodyClass

Body's class names

image

Optional image

imageClass

Optional image class name. If there's no image, but there's an icon, will be used for the icon.

icon

Optional icon

close

Default is true and display a close button.

closeClass

Close button's class names

autoremove

Default is true and removes the toast element from DOM after it is hidden

delay

Default is 2500 and toast element will be hidden after that amount of time

sticky

If true it don't autohide and should be closed using close button or called via Javascript.
Same as autohide:false

animation

Disables/enables animation when showing/hiding toast

template

The toast element's template. Default is:

<div class="toast">
  <div class="d-flex">
      <div class="toast-image"></div>
      <div class="toast-main">
        <div class="toast-header"></div>
        <div class="toast-body"></div>
      </div>
  </div>
</div>

alert

Can be false or true. Sets the aria-live and role attributes of the toast element.

You can also have a toast element in your HTML and use aceToaster function to show it:

<div id="mytoast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    ...
  </div>
  <div class="toast-body">
    ...
  </div>
</div>

$('#mytoast').aceToaster({
    placement: 'tr'
});

Functions

removeAll

Hides and removes all toast elements.
Two options are available:

• If placement is specified, only those in that particular placement will be removed
• If instant is true, toast will be removed instanly, otherwise it will first fade out

$.aceToaster.removeAll() // remove all
$.aceToaster.removeAll('tr') // remove all toasts in top right position

$.aceToaster.removeAll(null, true) // remove all toasts instantly

hideAll

Just hides the toasts

remove

Hides and removes a toast:

var newToast = $.aceToaster.add({ ... })
$.aceToaster.remove(newToast)

$.aceToaster.remove(4) // removes #ace-toaster-item-4'

hide

Just hides a toast

Events

add

Triggered before a toast is created

added

Triggered after a toast is created

clear

Triggered before all toasts are to be hidden using removeAll function

$(document).on('add.ace.toaster', function(e) {
    // e.preventDefault()
    // e.target is the new toast
})
$(document).on('added.ace.toaster', function(e) {
    // e.target is the new toast
})
$(document).on('clear.ace.toaster', function(e, info) {
    // e.preventDefault()
    // info.remove (remove or just hide)
    // info.placement ('all' or for example 'tr')
})