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.
Un cuadro de diálogo es un tipo de ventana modal que aparece frente al contenido de la aplicación para proporcionar información crítica (es decir, mensajes de advertencia) o solicitar una decisión con ventanas emergentes en la página web. La interfaz de usuario de Onsen proporciona 2 tipos de diálogo, es decir, diálogo básico y diálogo de material, para crear un diálogo atractivo que ayude a mejorar la experiencia general del usuario en el sitio web.
Onsen UI Dialog Clases de componentes CSS:
- Cuadro de diálogo básico: este componente proporciona la clase que se utiliza para crear el cuadro de diálogo básico.
- Diálogo de material : este componente proporciona la clase que se utiliza para crear el cuadro de diálogo de material, para proporcionar información importante al usuario.
Sintaxis:
<element-name class="Dialog-Component-Class">...</element-name>
Ejemplo 1: en el siguiente ejemplo de código, utilizaremos las clases de diálogo de la interfaz de usuario de Onsen para demostrar el uso del diálogo.
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> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI Dialog CSS Components </h3> <div class="dialog-mask"></div> <div class="dialog"> <div class="dialog-container"> <p style="text-align:center; margin-top:40px;"> Content </p> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: en el siguiente ejemplo de código, haremos uso de las clases de diálogo para demostrar el uso de diálogo.
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> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI Dialog CSS Components </h3> <div class="dialog-mask"> <div class="dialog"> <div class="dialog-container"> <p style="text-align:center;"> GeeksforGeeks </p> <p style="text-align:center;"> A computer science portal for geeks </p> </div> </div> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#dialog-category