Componentes de CSS del cuadro de diálogo de alerta de interfaz de usuario de Onsen

Onsen UI es un marco HTML5 gratuito que le permite crear interfaces de usuario (IU) únicas y prácticas. También simplifica el desarrollo de la interfaz de usuario, liberando a los programadores para que se concentren en los aspectos esenciales del proyecto. Onsen UI es una colección sofisticada de elementos de interfaz de usuario creados especialmente para aplicaciones móviles, con características que están listas para usar y se adhieren a los estándares de diseño nativos de iOS y Android. AngularJS fue la inspiración detrás de la creación de la interfaz de usuario de Onsen, sin embargo, también se puede usar con jQuery o cualquier otro marco.

Los componentes CSS preconstruidos de Onsen UI simplifican la construcción rápida de diseños de interfaz de usuario atractivos y flexibles. Para los desarrolladores móviles, Onsen CSS Components es un rodillo temático Topcoat basado en la web que simplifica el desarrollo 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.

Onsen UI Diálogo CSS Componente Alerta Diálogo Clases:

alert-dialog: Esta clase se agrega al recinto de todos los elementos que serán considerados como el diálogo para dar alertas.
alert-dialog-container: esta clase se agrega al recinto del contenedor que se considerará como el contenedor que contiene el diálogo para dar alertas.
alert-dialog-title: esta clase se agrega al título del cuadro de diálogo de alerta.
alert-dialog-content: esta clase se agrega a la descripción de la alerta.
alert-dialog-footer: esta clase se agrega al pie de página de la alerta. Puede tener botones o algún texto importante.
alert-dialog-button: esta clase se usa para agregar botones en un cuadro de diálogo de alerta.
alert-dialog-mask: esta clase se usa para agregar una máscara sobre toda la página alrededor de ese diálogo de alerta.

Sintaxis:

<div class="alert-dialog-mask"></div>
<div class="alert-dialog">
      <div class="alert-dialog-container">
        <div class="alert-dialog-title">
               ....
        </div>
        <div class="alert-dialog-content">
              ....
        </div>
        <div class="alert-dialog-footer">
               <button class="alert-dialog-button">. .</button>
        </div>
      </div>
</div>

Ejemplo 1: El siguiente ejemplo de código demuestra la implementación de un 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 Alert Dialog CSS Components
          </h3>
    </div>
    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog">
        <div class="alert-dialog-container">
            <div class="alert-dialog-title">
                Hi Geek
            </div>
            <div class="alert-dialog-content">
                This is an alert.
            </div>
            <div class="alert-dialog-footer">
                <button class="alert-dialog-button">OK
                  </button>
                <button class="alert-dialog-button">CANCEL
                  </button>
            </div>
        </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 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">
      </div>
    <div class="alert-dialog">
        <div class="alert-dialog-container">
            <div class="alert-dialog-title">
                Hi Geek
            </div>
            <div class="alert-dialog-content">
                You want to study from GFG?
            </div>
            <div class="alert-dialog-footer">
                <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>
    </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 priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta