Onsen UI es un marco HTML5 gratuito de código abierto que le permite diseñar interfaces de usuario (UI) novedosas y utilizables. También simplifica la creación de la interfaz de usuario, lo que permite a los desarrolladores de aplicaciones centrarse en la funcionalidad del programa. Onsen UI ofrece una gran colección de potentes componentes de interfaz de usuario diseñados específicamente para aplicaciones móviles y repletos de funciones listas para usar que siguen los estándares de diseño nativos de iOS y Android.
La interfaz de usuario de Onsen se creó teniendo en cuenta AngularJS; sin embargo, se puede usar con jQuery o cualquier otro marco. La interfaz de usuario de Onsen es un marco de JavaScript basado en PhoneGap y Cordova .
Los componentes CSS de la interfaz de usuario de Onsen son componentes CSS preconstruidos que se pueden usar para construir rápidamente diseños de interfaz de usuario adaptables y atractivos. Las partes visuales de los componentes Onsen UI CSS están todas implementadas en CSS puro (cssnext). Onsen CSS Components es un rodillo temático de Topcoat basado en la web que hace que el diseño de magníficas interfaces de usuario para desarrolladores móviles sea pan comido.
Onsen UI Notification es un elemento CSS que se puede usar para mostrar la cantidad de notificaciones/mensajes o algo similar. Esta característica se ve comúnmente en sitios de redes sociales, sistemas de correo electrónico y backends de aplicaciones. La notificación de material es una versión de la notificación con un estilo un poco diferente donde la fuente es más moderna y limpia y el color de fondo de la insignia de notificación tiene un color rojo rosado que el naranja más brillante en la notificación básica. Esto se usa para hacer notificaciones más sutiles que no llamarán demasiado la atención.
Clases utilizadas de notificación de material:
- notificación-material: esta clase se agrega principalmente para crear un icono/insignia de notificación de estilo materialista. Cuando se agrega a un elemento de lapso o párrafo, se transforma en una notificación de estilo materialista. Esto puede tomar un número o texto como valor que se mostrará en la notificación.
Sintaxis:
<span class="notification--material">
...
</span>
Ejemplo 1: el siguiente código muestra el uso de la clase de notificación para crear un elemento de intervalo con la insignia de notificación básica. El resultado mostrará la diferencia entre una insignia de notificación básica y material.
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>
Producción:
Ejemplo 2: El siguiente código muestra el uso de la clase de material 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 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>
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