Open In App

Onsen UI CSS Component Basic Notification

Improve
Improve
Like Article
Like
Save
Share
Report

Onsen UI is a free open-source HTML5 framework to create innovative and usable User Interfaces (UI). Furthermore, it simplifies UI development so that app developers may concentrate on the program’s functionality. Onsen UI provides a big collection of rich UI components created exclusively for mobile apps and filled with ready-to-use features that adhere to native iOS and Android design standards. Onsen UI is designed to work with AngularJS, but it may also be used with jQuery or any other framework. Onsen UI is a JavaScript Framework that is built on PhoneGap and Cordova.

Onsen UI CSS Components are pre-built CSS components that we can use to easily create customizable and attractive UI layouts. All visual parts of the Onsen UI CSS components are implemented in pure CSS (cssnext). Onsen CSS Components is a web-based Topcoat theme roller that makes it simple for PhoneGap developers to design stunning UIs. 

Onsen UI CSS Component Basic Notification is a CSS component that we can use to display the number of notifications/messages or anything similar to that. This feature is mostly used in social media sites, email systems, and back-ends of applications. 

Onsen UI CSS Component Basic Notification used classes:

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

Note: We can add a notification badge to images and many other components.

Syntax:

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

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

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <title>Onsen UI CSS Component Basic 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><br />
    </div>
    <div style="margin-left: 7rem;">
        <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 class to make a span element a notification badge and we are adding a notification badge to images.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <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><br />
    </div>
    <div style="margin-left: 2rem">
        <img src=
             width="100px">
        <span class="notification notification" 
              style="margin-left: -1rem">
          5
      </span>
    </div>
</body>
</html>


Output:

 

Reference: https://onsen.io/v2/api/css.html#notification-category



Last Updated : 17 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads