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.
El componente CSS de la interfaz de usuario de Onsen nos ofrece crear un popover de diseño propio. Hay muchos popover disponibles, pero en este artículo crearemos un popover básico .
Clases emergentes del componente CSS de la interfaz de usuario de Onsen:
- popover-mask: esta clase se usa para establecer un efecto de fondo gris para que se pueda ver el popover blanco predeterminado. *
- popover: esta clase se utiliza para crear una interfaz popover. *
- popover–bottom: esta clase se usa para colocar el popover en la parte inferior
- popover__arrow: esta clase se usa para mostrar el diagrama en forma de flecha para el popover. *
- popover–bottom__arrow: esta clase se usa para rotar el diagrama en forma de flecha hacia la cara inferior.
- popover__content: esta clase se utiliza para colocar el área de contenido del popover. *
- popover–bottom__content: esta clase se usa para colocar el área de contenido en la parte inferior de la ventana emergente.
Nota: Las clases marcadas con * se utilizan en todos los popovers.
Sintaxis:
<div class="popover-mask"></div>
<div class="popover popover--bottom" style="...">
<div class="popover__arrow popover--bottom__arrow" style="..."></div>
<div class="popover__content popover--bottom__content">
<div style="...">...</div>
</div>
</div>
Ejemplo 1: en este ejemplo, crearemos un texto emergente, el elemento emergente básico es el mismo que el elemento emergente inferior.
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 Basic Popover </strong> <div class="popover-mask"></div> <div class="popover" style="bottom: 450px; left: 360px;"> <div class="popover__arrow popover--bottom__arrow" style="left: 110px;"> </div> <div class="popover__content"> <div style="opacity:0.8; margin:10px"> A Computer Science Portal for Geeks </div> </div> </div> </center> </body> </html>
Producción:
Popover básico del componente CSS de la interfaz de usuario de Onsen
Ejemplo 2: Aquí, en este ejemplo, crearemos una ventana emergente de tipo conversación, como si dos amigos estuvieran teniendo una conversación.
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 Basic Popover </strong> <div class="popover-mask"></div> <div class="popover" style="bottom: 450px; left: 210px;"> <div class="popover__arrow popover--bottom__arrow" style="left: 50px;"> </div> <div class="popover__content"> <div style="opacity:0.8; margin:10px;"> Bro I am tensed about the placement </div> </div> </div> <div class="popover" style="bottom: 400px; left: 460px;"> <div class="popover__arrow popover--bottom__arrow" style="left: 200px;"> </div> <div class="popover__content"> <div style="opacity:0.8; margin:10px;"> GFG karlo, ho jayega It's the best platform </div> </div> </div> </center> </body> </html>
Producción:
Popover básico del componente CSS de la interfaz de usuario de Onsen
Referencia: https://onsen.io/v2/api/css.html#popover-category
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA