Onsen UI es un marco HTML5 de código abierto gratuito para crear interfaces de usuario (UI) innovadoras y utilizables. Además, simplifica el desarrollo de la interfaz de usuario para que los desarrolladores de aplicaciones puedan concentrarse en la funcionalidad del programa. La interfaz de usuario de Onsen proporciona una gran colección de componentes de interfaz de usuario enriquecidos creados exclusivamente para aplicaciones móviles y repletos de funciones listas para usar que se adhieren a los estándares de diseño nativos de iOS y Android. La interfaz de usuario de Onsen está diseñada para funcionar con AngularJS, pero también se puede usar con jQuery o cualquier otro marco. Onsen UI es un marco de JavaScript que se basa en PhoneGap y Cordova .
Los componentes CSS de la interfaz de usuario de Onsen son componentes CSS preconstruidos que podemos usar para crear fácilmente diseños de interfaz de usuario personalizables y atractivos. Todas las partes visuales de los componentes CSS de la interfaz de usuario de Onsen se implementan en CSS puro (cssnext). Onsen CSS Components es un rodillo temático de Topcoat basado en la web que simplifica a los desarrolladores de PhoneGap el diseño de impresionantes interfaces de usuario.
Onsen UI CSS Component Basic Notification 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 CSS Componente Clases utilizadas de notificación básica:
- 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.
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 código muestra el uso de la clase de notificación para convertir un elemento de intervalo en una insignia de notificación.
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 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>
Producción:
Ejemplo 2: El siguiente código muestra el uso de la clase de notificación para convertir un elemento de intervalo en una insignia de notificación y estamos agregando una insignia de notificación a las imágenes .
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><br /> </div> <div style="margin-left: 2rem"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210214171643/logo.png" width="100px"> <span class="notification notification" style="margin-left: -1rem"> 5 </span> </div> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#notification-category
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA