https://github.com/mulaza/unread-messages.js
Unread-Messages.js is a lightweight library that lets a user add floating number notifications to any object.
https://github.com/mulaza/unread-messages.js
component css es6 javascript javascript-library library vanilla-javascript
Last synced: 3 months ago
JSON representation
Unread-Messages.js is a lightweight library that lets a user add floating number notifications to any object.
- Host: GitHub
- URL: https://github.com/mulaza/unread-messages.js
- Owner: Mulaza
- License: mit
- Created: 2021-04-19T13:40:47.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-09T09:30:34.000Z (almost 5 years ago)
- Last Synced: 2025-02-20T13:40:59.345Z (over 1 year ago)
- Topics: component, css, es6, javascript, javascript-library, library, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 376 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Unread-Messages.js
## About
Unread-Messages.js is a lightweight library that lets a user add mobile-like notification counter badge to any object with just one wrapper.
## Install
### NPM
To install this package with NPM run the command below and link the needed javascript and css into your html file.
```text
npm i unreadmessages --save
```
### Direct Download
To use this package you need to link the needed javascript and css into your html file.
```html
```
Because the library looks over the the page content for specific classes, place the script tag at the bottom of your HTML file or add the `defer` keyword to the tag, so the script will load after the HTML content.
```html
```
## Tutorial
Include the main css file a and javascript file.
To initiate the, library two things are required, first a class of `notification-container` needs to be added to a wrapper element and the `val` data attribute needs to be defined inside of that element and you're done. If the data attribute is left empty it the displayed value will default to 0. To better illustrate the use of the library we'll be using FontAwesome icons as content for the wrappers.
```html
```
To fit the values with a reasonable size any value above 999 is displayed in a short-hand form. The displayed numbers shorthand follows the following convention
* Any count `1000` and over like `1800` will be formated as `1.8k`
* Any value `1000000` and over like `1200,000` will be displayed as `1.2M`
## API
In addition to the `data-val` data attribute there are other attributes that can be used to further customize the badge.
### Position
The position of the badge can be changed using the `data-pos` data attribute. If this attribute is not defined the badge position will default to `top-right`.
```html
```
#### Supported Positions
| Position | Tags |
| ------------- |:-------------|
| Top | top |
| Top Right | top-right |
| Top Left | top-left |
| Bottom | bottom |
| Bottom Right | bottom-right |
| Bottom Left | bottom-left |
### Color
You can also change the colors of the number tags by simply adding a `data-val` data attribute to your wrapper.
Any color css-supported color name works as well as RGB values. If this attribute is not defined the badge will default to `red`.
``` html
```
### Hide After Click
You can decide how you want the badge to persist after mouse clicks by using the `data-select-hide` data attribute by default it is set to true but it can optionally explicitly set `data-select-hide="false"`. This data attribute can also be set to `false` or `False` if you want the badge to persist after mouse clicks.
```html
```
You will find that after setting the `data-select-hide` attribute to `false`, you will no longer be able to dismiss the displayed tag with a mouse click.