Onsen UI es un marco HTML5 útil y de vanguardia que se usa libremente. Simplifica el desarrollo de la interfaz de usuario para que los desarrolladores de aplicaciones puedan concentrarse en la funcionalidad del software. La interfaz de usuario de Onsen es un recurso fantástico porque ofrece una amplia variedad de elementos de interfaz de usuario premium creados específicamente para aplicaciones móviles y cargados con características que se adhieren a los estándares de diseño nativos de iOS y Android. Aunque la interfaz de usuario de Onsen está diseñada para funcionar con AngularJS, se puede aplicar fácilmente a jQuery o cualquier otro marco. Utilizando PhoneGap y Cordova, se desarrolló el marco JavaScript de la interfaz de usuario de Onsen.
Componentes CSS para desarrolladores.
El cuadro de diálogo básico de Onsen UI es un cuadro de diálogo de tipo modal básico que se utiliza para mostrar cualquier tipo de información. El cuadro de diálogo también puede contener otros componentes CSS como interruptores, botones de opción, etc.
Onsen UI CSS Component Diálogo básico Clases utilizadas:
- dialog: Esta clase se agrega a todos los elementos que serán considerados como el diálogo.
- contenedor de diálogo: esta clase se agrega al contenedor que se considerará como el contenedor que contiene el diálogo.
- máscara de diálogo: esta clase se usa para agregar una máscara sobre toda la página alrededor de ese diálogo.
Sintaxis:
<div class="dialog-mask"></div>
<div class="dialog">
<div class="dialog-container">
<p>...</p>
</div>
</div>
Ejemplo 1: el siguiente código demuestra la implementación de un cuadro de diálogo mediante la interfaz de usuario de Onsen.
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"> </head> <body> <div style="margin:3rem; font-family:Roboto, sans-serif;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3 style="margin-top:-1.5rem;"> Onsen UI CSS Component Basic Dialog </h3> </div> <div class="dialog-mask"></div> <div class="dialog"> <div class="dialog-container"> <p style="text-align:center; margin-top:40px; opacity:0.4;"> Hi Geek!! This is a basic Dialog </p> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra cómo puede agregar otros componentes CSS a un cuadro de diálogo, como un cambio de 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"> </head> <body> <div style="margin:3rem; font-family:Roboto,sans-serif;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3 style="margin-top:-1.5rem;"> Onsen UI CSS Component Basic Dialog </h3> </div> <div class="dialog-mask"></div> <div class="dialog"> <div class="dialog-container"> <p style="text-align:center; margin-top:40px; opacity:0.4;"> Hi Geek!! This is a basic Dialog </p> <label class="switch switch--material" style="float:right; margin-right:2rem; margin-bottom:1rem;"> <input type="checkbox" class="switch__input switch--material__input"> <div class="switch__toggle switch--material__toggle"> <div class="switch__handle switch--material__handle"> </div> </div> </label> </div> </div> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#dialog-category
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA