Toast

Creating a toast can help you to send messages to your users through simple notifications.
They are easily customisable using any of the axentix classes.

<button onclick="toast.show()" class="btn shadow-1 rounded-1 primary">Show Toast</button>
let toast = new Axentix.Toast('This is a toast', {
  classes: 'secondary rounded-2 shadow-2'
});
To know all the ways to initialize a JS component, please read the JS Init page.

Change toast#

A website using the toast feature always needs to use different Toasts, to show different informations.
Using the change() method, you can change the content and the classes of your toast.

toast.change('This is the new html content <br> This is at the second line.', {
  classes: 'red shadow-3'
});

Closable toast#

Using the isClosable option, you can let your user close your toasts by clicking on a cross.

toast.change('This is a closable toast', {
  classes: 'secondary shadow-2 rounded-2',
  isClosable: true
});

Options#

Property Default value Description
animationDuration 400 Opening and closing animation duration in ms.
duration 4000 The display duration of the toast before disapearing in ms.
classes '' Classes of the toast.
position right Position of the toast container.
Accepted values are 'right' or 'left'.
direction top Animation direction of the toast.
Accepted values are 'top' or 'bottom'.
mobileDirection bottom Animation direction of the toast on mobile view.
Accepted values are 'top' or 'bottom'.
isClosable false Create an icon to close the toast.
isSwipeable true Enable the ability to swipe the toast to dismiss.
closableContent 'x' The content to close the toast. You can write html to create a button or anything.
loading
{
  enabled: true,
  border: '2px solid #E2E2E2'
}
Loading animation. You can disable it and custom the border used for it.
offset
{
  x: '5%',
  y: '0%',
  mobileX: '10%',
  mobileY: '0%'
}
Offsets between the sides of the screen and the toaster. Useful if you don't want a toast to be placed above your navbar for example.

Methods#

let toast = new Axentix.Toast('This is a toast', {
  direction: 'top',
  position: 'right',
  classes: 'blue rounded-2 shadow-2'
});

// Syntax : toast.{method}
toast.show();
Method Description
.show() Show the toast.
.change('content', options) Change the content of the Toast.
The second parameter is optional, but can be useful when you want to change multiple options like the classes and the position at the same time.
Here is an example.

Events#

document.addEventListener('ax.toast.show', function() {
  // show event !
});
Event Description
ax.toast.show Event sent when the show() method is called.
ax.toast.shown Event sent when the toast has been shown.
ax.toast.hide Event sent when the toast is being closed.
ax.toast.remove Event sent when the toast has been closed.

Styling#

CSS Variable Default value Description
--ax-toaster-z-index 1000 Toast holder z-index.