tjb-notify

Simple, dismisseable notification message as WebComponent

Example

https://tjb-webcomponents.github.io/tjb-notify/

Add to project

You might want to use a Polyfill for WebComponent:

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>

Include via HTML

Include it:

<script
  src="https://tjb-webcomponents.github.io/tjb-notify/tjb-notify.min.js"
  type="module"
></script>

Include via JavaScript

import 'https://tjb-webcomponents.github.io/tjb-notify/tjb-notify.min.js'

Include via NPM

Console:

npm i -S tjb-notify

Then in your code:

import 'tjb-notify';

Useage

<tjb-notify></tjb-notify>

Methods

| method | properties | example | description | | ------- | --------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------- | | error | - type (@String/@Node) | tjbNotify.error = html\My Error Node`| displays the message in a box of respective collor with pulldown animation | | success | - type (@String/@Node) <br> |tjbNotify.success = 'My success Text` | displays the message in a box of respective collor with pulldown animation |

Styling

Default public values:

:host {
  --notify-background-error: #fa354c;
  --notify-background-success: limegreen;
  --notify-color-error: white;
  --notify-color-success: white;
  --notify-margin: 10px 0;
  --notify-padding: 15px;
}

These can be overwritten easily by targetting the element. Example:

tjb-notify {
  --notify-background-error: darkred;
}

Enjoy