Notification Controller
Web component implementation of a notification styled UI. Inspired around Firebase's notification styling.
Implementation
Using Locally
npm install @academy-ui/notification --save- Put a script tag similar to this
<script src='node_modules/@academy-ui/notification/dist/notification-controller.js'></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
Using a CDN
- Put a script tag similar to this
<script src='https://unpkg.com/@academy-ui/notification@1.0.3/dist/notification-controller.js'></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
Note: For all implementations you need to include the notification-controller in the root index.html of your project.
<notification-controller class="top-right"></notification-controller>
Available styling placement classes include:
- top-left
- top-right
- top-center
- bottom-left
- bottom-right
- bottom-center
Usage
Success Messages
document.getElementsByTagName('notification-controller').item(0).success('This is a success alert.');
Error Messages
document.getElementsByTagName('notification-controller').item(0).error('This is an error alert.');
Warning Messages
document.getElementsByTagName('notification-controller').item(0).warning('This is a warning alert.');
Info Messages
document.getElementsByTagName('notification-controller').item(0).error('This is an info alert.');
Note: You can pass the full options config instead of a string message to control other properties such as icons, durations, individual notification animations, etc.