Onsen UI CSS Component Material Notification

Last Updated : 17 Jun, 2022

Onsen UI is a free open-source HTML5 framework that allows you to design novel and usable user interfaces (UI). It also makes UI creation simpler, allowing app developers to focus on the program’s functionality. Onsen UI offers a large collection of powerful user interface components designed specifically for mobile apps and packed with ready-to-use features that follow native iOS and Android design standards.
Onsen UI was built with AngularJS in mind, however, it may be used with jQuery or any other framework. Onsen UI is a PhoneGap and Cordova-based JavaScript framework.

Onsen UI CSS Components are pre-built CSS components that may be used to quickly construct adaptable and appealing user interface layouts. The Onsen UI CSS components’ visual parts are all implemented in pure CSS (cssnext). Onsen CSS Components is a web-based Topcoat theme roller that makes designing gorgeous UIs for mobile developers a breeze.

Onsen UI Notification is a CSS element that can be used to show the number of notifications/messages or something similar. This feature is commonly seen in social media sites, email systems, and application backends. Material Notification is a little differently styled version of the notification where the font is more modern and clean and the background color of the notification badge has a pinkish-red color than the brighter orange in the basic notification. This is used to make more subtle notifications that won’t be too much eye-catching.

Material Notification Used Classes:

notification–material: This class is mainly added to create a materialistic styled notification icon/badge. When it is added to a span or paragraph element it is transformed into a notification of materialistic style. This can take a number or text as a value which will be shown in the notification.

Syntax:

<span class="notification--material">
    ...
</span>

Example 1: The below code shows the usage of the notification class to make a span element with the basic notification badge. The output will show the difference between a basic and a material notification badge.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <title>Onsen UI CSS Component Notification</title> 
</head> 
<body> 
    <div style="margin:2rem; font-family:Roboto,sans-serif;"> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h3 style="margin-top:-1.5rem;"> 
            Onsen UI CSS Component Basic Notification 
        </h3> 
    </div> 
    <div style="margin-left:10rem;"> 
        <span class="notification">1</span> 
        <span class="notification">50</span> 
        <span class="notification">geeks</span>    
    </div> 
</body> 
</html>

Output:

Example 2: The below code shows the usage of the notification–material class to make a span element a notification badge.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <title>Onsen UI CSS Component Material Notification</title> 
</head> 
<body> 
    <div style="margin:2rem; font-family:Roboto,sans-serif;"> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h3 style="margin-top:-1.5rem;"> 
            Onsen UI CSS Component Material Notification 
        </h3> 
    </div> 
    <div style="margin-left: 10rem;"> 
        <span class="notification  
                     notification--material">1</span> 
        <span class="notification  
                     notification--material">50</span> 
        <span class="notification  
                     notification--material">geeks</span>    
    </div> 
</body> 
</html>