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

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

Publicación traducida automáticamente

Artículo escrito por pall58183 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *