Sliding Toaster & Snackbar In JavaScript – toastnotify

Category: Javascript , Notification | January 4, 2020
Author: alvarez25leo
Views Total: 499 views
Official Page: Go to website
Last Update: January 4, 2020
License: MIT

Preview:

Sliding Toaster & Snackbar In JavaScript – toastnotify

Description:

toastnotify is a tiny notification plugin to create Google-style toasts and snackbars sliding from the left side of the screen when triggered.

How to use it:

1. Import the stylesheet toastnotify.css and JavaScript toastnotify.js into the HTML page.

<link rel="stylesheet" href="./src/css/toastnotify.css" />
<script src="./src/js/toastnotify.js"></script>

2. Show a basic toast notification on the page.

Toastnotify.create({
  text: "Notification Message Here"
});

3. Show a snackbar with custom actions on the page.

Toastnotify.create({
  text: "Notification Message Here",
  callbackOk:()=>{
    console.log('OK');
  },
  callbackCancel:()=>{
    console.log('Cancel');
  }
});

4. Change the default theme. All possible themes:

  • dark
  • default
  • primary
  • info
  • warning
  • danger
  • success
  • secondary
  • pink
Toastnotify.create({
  text: "Notification Message Here",
  type: 'dark',
  callbackOk:()=>{
    console.log('OK');
  },
  callbackCancel:()=>{
    console.log('Cancel');
  }
});

5. Customize the label text.

Toastnotify.create({
  text:"CSSSCRIPT.COM",
  type:'dark',
  buttonCancel:'Cancel',
  buttonOk: 'OK',
  important:true,
  callbackOk:()=>{
    console.log('Precionado OK');
  },
  callbackCancel:()=>{
    console.log('Precionado Cancelado');
  }
});

6. Override the default animations.

Toastnotify.create({
  text:"CSSSCRIPT.COM",
  type:'dark',
  animationIn:'fadeInLeft',
  animationOut:'fadeOutLeft'
});

7. Specify a duration if you’d like to dismiss the notification automatically.

Toastnotify.create({
  text:"CSSSCRIPT.COM",
  duration:5000
});

You Might Be Interested In:


Leave a Reply