status-bar-component

status-bar

An easy drop-in status-bar vanilla custom element. No framework dependencies, small footprint.

Demo

https://nuclei.github.io/status-bar/index.html

Installation

npm install --save status-bar-component

You need the webcomponents-lite polyfill.

Load the polyfill and the status-bar.js in your html page or however you load you javascript dependencies:

<script src="webcomponents-lite.js"></script>
<script src="./node_modules/status-bar-component/dist/status-bar.js"></script>

Usage

Just drop the <status-bar> element into you html and add your text.

Type

You can adjust the type attribute to toggle change it between notice, success, warning and error.

<status-bar type="notice">A notice</status-bar>

Closable

If you want the status-bar to have an x to close it, just add the closable attribute.

<status-bar type="error" closable>An error message.</status-bar>

Timeout (close after x ms)

By setting the timeout attribute, the status bar will close itself after whatever ms you set it to.

<status-bar type="notice" timeout="1000">This self-closes after 1 second.</status-bar>

Icons

By default no icon will be shown, but you can add the icon attribute to use the default icons for the current type.

<status-bar type="success" icon>An success message.</status-bar>

Detached

To get a status-bar element that is not attached to the top, add the detached attribute.

<status-bar type="warning" detached>An warning message.</status-bar>

Custom styling

You can change the style of the status-bar by using the following css properties.

/* color properties for types of status messages */
--status-bar-error-color: rgb(240,62,62);
--status-bar-success-color: rgb(55,178,77);
--status-bar-notice-color: rgb(28,124,214);
--status-bar-warning-color: rgb(250,176,5);
/* properties for detached items */
/* shadow of the item */
--status-bar-detached-shadow: 0 0 2px 0 rgba(0,0,0,.25);
/* border-radius */
--status-bar-detached-border-radius: 5px;