Notifications is a customizable, appealing, and stylistic notification system.
Using Fontawesome, you can use tons of clean icons.
To use Notifications, first import the stylesheets in the head, like this:
<link rel="stylesheet" href="https://Battledash-2.github.io/Notifications/src/styles.css" />
<!-- or href="https://cdn.jsdelivr.net/gh/Battledash-2/Notifications@latest/src/styles.css" /> -->
To send notifications, import the file using the ES6 import
syntax. Remember that you can only import scripts within modules, so on your script tag you have to use type="module"
!
<script type="module">
import * as Notifications from 'https://Battledash-2.github.io/Notifications/src/script.js'; // or 'https://cdn.jsdelivr.net/gh/Battledash-2/Notifications@latest/src/script.js';
Notifications.ShowNotification(null, 'warning', Infinity, 'Hello!', 'INFO');
</script>
Notifications will be referred to as API
.
- Removes notification
elm
from the screen, while still showing the transition out.
- Creates a new notifications and adds it to the screen.
Returns the created element.
- Checks if a notifications with the provided properties exists.
Returns null or the element found.
- Sets the max amount of notifications on the screen at once if provided.
Returns the new max.
-
Sets the max amount for the small counter if provided.
Returns the new counter max. -
Sets the default types object if provided. The types object is a set of key/values, and each key is a type of notification. For example:
info: {
icon: 'fa-solid fa-circle-info',
color: '#333333',
caption: 'INFO',
},
- . With that, if you pass 'info' into the color parameter of the
API.ShowNotification
, it will set the color to thecolor
from the object. If the icon parameter isnull
, it will also use the icon from the object. Same goes for the caption. When color isnull
orundefined
, it will default toprimary
.
Returns the new colors object. - Default types are: 'info', 'primary', 'success', 'error', 'warning' (all types must be lowercase)