En este artículo, aprenderemos cómo incluir popover usando la interfaz de usuario de Onsen. 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. Onsen UI 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.
Los popovers se utilizan para notificar al usuario qué notas debe conocer antes de continuar. También se puede usar como una notificación, como suponiendo que el usuario no tiene idea de lo que está pasando en una sección en particular, entonces esta ventana emergente puede ayudarlo o guiarlo.
Componentes CSS emergentes:
Clases:
- popover: esta clase se utiliza para crear una interfaz popover.
- popover-mask: esta clase se utiliza para crear una máscara emergente simple.
- popover__arrow: esta clase se utiliza para crear una flecha emergente.
- popover__content: esta clase se utiliza para crear una ventana emergente de contenido.
- popover__content: esta clase se utiliza para crear popover de contenido.
Ventana emergente básica : este componente se utiliza para proporcionar una ventana emergente básica en la parte inferior de la página.
- popover–bottom: esta clase se usa para crear un popover en la posición inferior.
- popover–bottom__arrow: esta clase se usa para crear una flecha emergente en la posición inferior.
- popover–bottom__content: esta clase se usa para crear un popover de contenido en la posición inferior.
Popover (superior) : este componente se utiliza para proporcionar una ventana emergente en la parte superior de la página.
- popover–top: esta clase se usa para crear una ventana emergente en la posición superior.
- popover–top__arrow: esta clase se utiliza para crear una flecha emergente en la posición superior.
- popover–top__content: esta clase se utiliza para crear una ventana emergente de contenido en la posición superior.
Ventana emergente (izquierda): este componente se utiliza para proporcionar una ventana emergente en la esquina más a la izquierda de la página web.
- popover–left: esta clase se usa para crear un popover en la posición izquierda.
- popover–left__arrow: esta clase se usa para crear una flecha emergente en la posición izquierda.
- popover–left__content: esta clase se usa para crear un popover de contenido en la posición izquierda.
Ventana emergente (derecha): este componente se utiliza para proporcionar una ventana emergente en la esquina más a la derecha de la página web.
- popover–right: esta clase se usa para crear un popover en la posición correcta.
- popover–right__arrow: esta clase se usa para crear el popover derecho en la posición correcta.
- popover–right__content: esta clase se utiliza para crear una ventana emergente de contenido en la posición correcta.
Ventana emergente de material : este componente se utiliza para proporcionar una ventana emergente del tipo de material y sus clases asociadas se enumeran a continuación.
- popover-mask–material: esta clase se utiliza para crear una ventana emergente de material de máscara.
- popover–material: esta clase se usa para crear un popover de material.
- popover–material__arrow: Esta clase se usa para crear un popover de material.
- popover–material__content: esta clase se utiliza para crear contenido material.
Sintaxis:
<element-name class="class-name">...</element-name>
Ejemplo 1: en el siguiente código, haremos uso de las clases anteriores para demostrar el uso del componente popover.
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 Popover CSS Components </h3> <br> <br> <div class="popover-mask"></div> <div class="popover popover--bottom" style="bottom: 20px; left: 65px;"> <div class="popover__arrow popover--bottom__arrow" style="left: 110px;"> </div> <div class="popover__content popover--bottom__content"> <div style="text-align:center;opacity:0.8; margin-top:40px"> Content </div> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: En el siguiente código, haremos uso de las clases anteriores para demostrar el uso del componente popover.
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 Popover CSS Components </h3> <br> <br> <div class="popover-mask"></div> <div class="popover popover--right" style="top: 20px; right: 20px;"> <div class="popover__arrow popover--right__arrow" style="bottom: 50px;"> </div> <div class="popover__content popover--right__content"> <div style="text-align: center; opacity: 0.8; margin-top: 40px"> Content </div> </div> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#popover-category