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 o solicitar una decisión. El cuadro de diálogo de material del componente CSS de la interfaz de usuario de Onsen se utiliza para crear el cuadro de diálogo en la interfaz de usuario de Onsen para proporcionar información importante al usuario. Para crear el cuadro de diálogo Material, utilizaremos las siguientes clases.
Clases de diálogo de material del componente CSS de la interfaz de usuario de Onsen:
- dialog-mask–material: esta clase se utiliza para crear la máscara de diálogo de material.
- dialog–material: esta clase se utiliza para crear el cuadro de diálogo de material.
- dialog-container–material: esta clase se utiliza para crear el contenedor de material.
Sintaxis:
<div class="dialog-mask dialog-mask--material"></div>
<div class="dialog dialog--material">
<div class="dialog dialog-container--material">
....
</div>
</div>
Ejemplo 1: El siguiente ejemplo muestra el cuadro de diálogo Material del componente CSS de la interfaz de usuario de Onsen.
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> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Material Dialog </strong> <div class="dialog-mask dialog-mask--material"></div> <div class="dialog dialog--material"> <div class="dialog dialog-container--material"> <h2> GeeksforGeeks </h2> <p> A Computer Science portal for geeks. </p> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el cuadro de diálogo Material del componente CSS de la interfaz de usuario de Onsen.
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> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Material Dialog </strong> <div class="dialog-mask dialog-mask--material"></div> <div class="dialog dialog--material"> <div style="padding-left: 5px;" class="dialog dialog-container--material"> <p> GeeksforGeeks </p> <button class="button button--material"> GFG 1 </button> <button class="button button--material"> GFG 2 </button> </div> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#button-category
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA