Onsen UI es un marco HTML5 que le permite diseñar interfaces de usuario distintivas y utilizables de forma gratuita (UI). También facilita la creación de la interfaz de usuario, lo que permite a los programadores centrarse en el núcleo del producto. La interfaz de usuario de Onsen es un conjunto complejo de componentes de interfaz de usuario diseñados específicamente para aplicaciones móviles, con 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, pero también se puede usar con jQuery o cualquier otro marco. La interfaz de usuario de Onsen es un marco JavaScript de PhoneGap y Cordova.
Onsen UI proporciona los componentes CSS preconstruidos para diseñar rápidamente diseños de interfaz de usuario versátiles y atractivos. Onsen CSS Components es un rodillo temático Topcoat basado en la web para desarrolladores móviles que facilita la creación de interfaces de usuario atractivas.
El cuadro de diálogo de alerta se utiliza para mostrar algunos mensajes de advertencia con ventanas emergentes en la página web. Material Alert Dialog utiliza varios componentes CSS para crear una interfaz de usuario atractiva que ayuda a mejorar la experiencia general del usuario.
Onsen UI Diálogo CSS Componente Material Alerta Diálogo Clases:
- alert-dialog: Esto encierra todos los elementos que serán considerados como el diálogo para dar alertas.
- alert-dialog–material: Esto encierra todos los elementos que se considerarán como el diálogo para dar alertas y está en material style design.
- alerta-diálogo-contenedor: Esto encierra el contenedor que se considerará como el contenedor que contiene el diálogo para dar alertas.
- alert-dialog-container–material: Esto encierra el contenedor que se considerará como el contenedor que contiene el cuadro de diálogo para dar alertas y es estilo de diseño de materiales.
- alert-dialog-title: contiene el título del cuadro de diálogo de alerta.
- alert-dialog-title–material: contiene el título del cuadro de diálogo de alerta y lo especifica en el estilo de diseño de materiales.
- alert-dialog-content: contiene la descripción de la alerta.
- alert-dialog-content–material: contiene la descripción de la alerta y especifica que tiene un estilo de diseño de tipo de material.
- alert-dialog-footer: contiene el pie de página de la alerta. Puede tener botones o algún texto importante.
- alert-dialog-footer–material: contiene el pie de página de la alerta. Puede tener botones o algún texto importante y es un estilo de diseño de tipo material.
- alert-dialog-button: esta clase se usa para agregar botones en un cuadro de diálogo de alerta.
- alert-dialog-button–material: esta clase se usa para agregar botones en un cuadro de diálogo de alerta y especifica que tiene un estilo de diseño de tipo de material.
- alert-dialog-mask: esto agrega una máscara sobre toda la página alrededor de ese diálogo de alerta.
- alert-dialog-mask–material: esto agrega una máscara sobre toda la página alrededor de ese cuadro de diálogo de alerta en el estilo de diseño de tipo de material.
Sintaxis:
<div class="alert-dialog-mask alert-dialog-mask--material"></div>
<div class="alert-dialog alert-dialog--material">
<div class="alert-dialog-container alert-dialog-container--material">
<div class="alert-dialog-title alert-dialog-title--material">
...
</div>
<div class="alert-dialog-content alert-dialog-content--material">
...
</div>
<div class="alert-dialog-footer alert-dialog-footer--material">
<button class="alert-dialog-button alert-dialog-button--material">
...
</button>
</div>
</div>
</div>
Ejemplo 1: El siguiente ejemplo de código muestra un cuadro de diálogo de alerta como un componente CSS.
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 Dialog CSS Component Material Alert Dialog </h3> </div> <div class="alert-dialog-mask alert-dialog-mask--material"></div> <div class="alert-dialog alert-dialog--material"> <div class="alert-dialog-container alert-dialog-container--material"> <div class="alert-dialog-title alert-dialog-title--material"> Hi Geek </div> <div class="alert-dialog-content alert-dialog-content--material"> This is a alert. </div> <div class="alert-dialog-footer alert-dialog-footer--material"> <button class="alert-dialog-button alert-dialog-button--material">OK </button> <button class="alert-dialog-button alert-dialog-button--material">CANCEL </button> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra cómo podemos agregar otros componentes CSS al cuadro de diálogo de alerta.
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 Dialog CSS Component Material Alert Dialog </h3> </div> <div class="alert-dialog-mask alert-dialog-mask--material"> </div> <div class="alert-dialog alert-dialog--material"> <div class="alert-dialog-container alert-dialog-container--material"> <div class="alert-dialog-title alert-dialog-title--material"> Hi Geek </div> <div class="alert-dialog-content alert-dialog-content--material"> You want to study from GFG? </div> <div class="alert-dialog-footer alert-dialog-footer--material"> <label class="switch switch--material" style="float: right; margin-right: 2rem"> <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> </div> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#alert-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