THEMETRIAL

Mobile App Style Badge Notification Count – Unread-Messages.js

Author:Mulaza
Views Total:0 views
Official Page:Go to website
Last Update:May 5, 2021
License:MIT

Preview:

Mobile App Style Badge Notification Count – Unread-Messages.js

Description:

Unread-Messages.js is a tiny JavaScript library that helps you create floating notification badges with unread messages count just like the app icon badge you see on iOS or Android.

How to use it:

1. Import the following JavaScript and CSS files into the document.

<link rel=”stylesheet” href=”dist/css/style.css” />
<script src=”dist/js/main.js”></script>

2. Determine the number of unread messages in the data-val attribute:

<div class="notification-container" data-val="99">
  <div>My App</div>
</div>

3. Specify the position of the badge:

  • top
  • top-right
  • top-left
  • bottom
  • bottom-right
  • bottom-left
<div class="notification-container btn" data-val="1234567" data-pos="bottom-left">
  <div>App</div>
</div>

4. Customize the background color.

<div class="notification-container btn" data-val="5" data-color="black">
  <div>App</div>
</div>


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.