THEMETRIAL

Clean And Customizable Toast Notification Library – Toaster

Author:RomaDev94
Views Total:0 views
Official Page:Go to website
Last Update:June 8, 2021
License:MIT

Preview:

Clean And Customizable Toast Notification Library – Toaster

Description:

Yet another toast notification JavaScript library for creating customizable and clean-looking alert popups on the page.

Features:

  • 4 notification types: info, warning, error, success.
  • 6 position & placement combinations.
  • Execute a callback after the toast has dismissed.

How to use it:

1. Load the Toaster’s JavaScript and CSS files in the document.

<link rel="stylesheet" href="https://www.cssscript.com/toaster/toaster.css" />
<script src="toaster/toaster.js"></script>

2. Show a default toast message on the page.

new Toaster({
    msg: "Toast Message Here"
})

3. Add a header to the toast message.

new Toaster({
    msg: "Toast Message Here",
    header: "Toast Header",
})

4. Set the notification type: info (default), warning, error, success.

new Toaster({
    msg: "Toast Message Here",
    type: "error",
})

5. Determine how long the toast message lasts. Default: 3 (seconds).

new Toaster({
    msg: "Toast Message Here",
    duration: 3
})

6. Specify the time to wait before showing the toast message. Default: 0.

new Toaster({
    msg: "Toast Message Here",
    delay: 1
})

7. Set the position of the toast message.

new Toaster({
    msg: "Toast Message Here",
    alignment: "left", // left|right|center
    position: "top", // top|bottom
})

8. Apply rounded borders to the toast message.

new Toaster({
    msg: "Toast Message Here",
    borders: "round",
})

9. Override the default styles.

new Toaster({
    msg: "Toast Message Here",
    colors: {
      warning: "#E78D0D",
      error: "#E43423",
      info: "#1469F5",
      success: "#3BE515",
    },
})

10. Perform a function when the toast message dismisses.

new Toaster({
    msg: "Toast Message Here",
    whenEnded: (()=>{}),
})


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.