Author: | PotatoMaaan |
---|---|
Views Total: | 208 views |
Official Page: | Go to website |
Last Update: | March 24, 2022 |
License: | MIT |
Preview:

Description:
A JavaScript library that brings Growl-style desktop notifications to the web.
PNT.js is a small and fast JavaScript library that helps you create grow-style sliding notifications on the web page. It auto dismisses after a timeout or can be dismissed as a normal notification.
It includes no external dependencies aside from HTML5 and JavaScript, and is easy to customize.
How to use it:
1. Import the PNT.js into your document.
<link rel="stylesheet" href="./pnt/pnt-styles.css" /> <script src="./pnt/pnt-core.js"></script>
2. Create notifications with various preset styles.
// Info pnt.presets.info("Info message goes here"); // Success pnt.presets.success("Success message goes here"); // Warning pnt.presets.warn("Warning message goes here"); // Error pnt.presets.error("Error message goes here");
3. Or create a customizable notification using the pnt.compose()
method.
// pnt.compose("message", "title", "bgColor", "fontColor", isRemoveable, timeout) pnt.compose("Your message goes here", "Your title goes here", "#ffffff", "#000000", false, 5000);
4. Override the default configs directly in the JS.
config: { // Specifies if pnt pulls it's default font "Rubik" from google fonts. // If this option is disabled and the user doesn't have the font installed, pnt will use a fallback font pullFromGooglefonts: true, // Specifies the max width of the container and the contents inside it. Use it to control how "long" your messages will be containerMaxWidth: 400, // (px) // The amount of time an animation will take to complete animationDuration: 400, // (ms) // Set the interpolation for the adding and removing of messages animationInterpolation: "cubic-bezier(0.075, 0.82, 0.165, 1)", // Turn debug mode on / off. Debug mode will post logs of the current events to the console debug: false, },
5. Clear all notifications.
pnt.presets.clearAll();