Onsen UI es un marco HTML5 gratuito de código abierto para crear interfaces de usuario únicas y utilizables (UI). También agiliza el desarrollo de la interfaz de usuario, lo que permite a los desarrolladores de aplicaciones centrarse en la funcionalidad del programa. Onsen UI es 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ó con AngularJS en mente, 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 crear rápidamente diseños de interfaz de usuario adaptables y atractivos. Los aspectos 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 Topcoat basado en la web para desarrolladores móviles que hace que la creación de interfaces de usuario hermosas sea muy fácil.
Onsen UI CSS Componentes utilizados Clases:
- interruptor: esta clase se agrega al elemento de etiqueta que encierra todo el interruptor en su interior.
- switch__input: esta clase se agrega al elemento de entrada que muestra la entrada en el interruptor que generalmente está encendido o apagado o cambia el controlador hacia el lado derecho o izquierdo.
- switch__toggle: esta clase se agrega a un elemento que permite alternar el interruptor, lo que generalmente significa activar o desactivar o cambiar el controlador hacia el lado derecho o izquierdo.
- switch__handle: esta clase se usa para agregar un nombre al conmutador.
Sintaxis:
<label class="switch">
<input class="switch__input" disabled>
<div class="switch__toggle">
<div class="switch__handle"></div>
</div>
</label>
Atributos:
- disabled: agregar este atributo hace que el interruptor siempre esté deshabilitado de forma predeterminada.
- verificado: agregar este atributo hace que el interruptor siempre esté verificado de manera predeterminada.
Ejemplo 1: en el código que se proporciona a continuación, veremos cómo hacer un cambio marcado y no marcado usando la clase switch__toggle y el atributo marcado .
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 Switch</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 Switch </h3><br /> </div> <div style="margin-left: 10rem;"> <label class="switch"> <input type="checkbox" class="switch__input"> <div class="switch__toggle"> <div class="switch__handle"></div> </div> </label> <label class="switch"> <input type="checkbox" class="switch__input" checked> <div class="switch__toggle"> <div class="switch__handle"></div> </div> </label> </div> </body> </html>
Producción:
Ejemplo 2: en el código que se proporciona a continuación, veremos cómo hacer un interruptor marcado y deshabilitado usando la clase switch__toggle y el atributo disabled . Agregue un nombre/etiqueta/etiqueta a las manijas del interruptor con la ayuda de la clase switch__handle .
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 Switch</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 Switch </h3><br /> </div> <div style="margin-left: 10rem;"> <label class="switch"> <input type="checkbox" class="switch__input"> <div class="switch__toggle"> <div class="switch__handle">G</div> </div> </label> <label class="switch"> <input type="checkbox" class="switch__input" disabled> <div class="switch__toggle"> <div class="switch__handle">F</div> </div> </label> <label class="switch"> <input type="checkbox" class="switch__input"> <div class="switch__toggle"> <div class="switch__handle">G</div> </div> </label> </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