status-bar-component
v1.2.1
Published
An easy drop-in status-bar solution as a custom element
Downloads
15
Maintainers
Readme
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;