Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.
Onsen UI Notification CSS Component es un componente CSS que podemos usar para mostrar la cantidad de notificaciones/mensajes o algo similar. Esta función se usa principalmente en sitios de redes sociales, sistemas de correo electrónico y back-end de aplicaciones.
Onsen UI Notificación CSS Componentes Clases:
- notificación: esta clase se agrega principalmente para crear un icono/insignia de notificación. Cuando se agrega a un elemento de intervalo o párrafo, se transforma en una notificación. Esto puede tomar un número o texto como valor que se mostrará en la notificación.
- notificación–material: esta clase se utiliza para crear la notificación de material.
Nota: podemos agregar una insignia de notificación a las imágenes y muchos otros componentes.
Sintaxis:
<span class="notification">...</span>
Ejemplo 1: El siguiente ejemplo demuestra los componentes CSS de notificación de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <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"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI Notification CSS Components </strong> <br> <br> <span class="notification">1</span> <span class="notification">50</span> <span class="notification">geeks</span> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra los componentes CSS de notificación de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <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"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI Notification CSS Components </strong> <br> <br> <span class="notification notification--material"> 1 </span> <span class="notification notification--material"> 50 </span> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210214171643/logo.png" width="100px"> <span class="notification notification--material" style="margin-left: -1rem"> 5 </span> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#notification-category
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA