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.
Onsen UI CSS Component nos ofrece crear un popover de diseño propio. Hay muchos popovers y en este artículo crearemos un popover superior.
Onsen UI CSS Component Popover (arriba) Clases:
- 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–top: esta clase se usa para colocar el popover en la parte inferior
- popover__arrow: esta clase se demanda para mostrar el diagrama en forma de flecha para el popover.*
- popover–top__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–top__content: esta clase se utiliza para colocar el área de contenido en la parte superior 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--top" style="...">
<div class="popover__arrow
popover--top__arrow" style="..."></div>
<div class="popover__content popover--top__content">
<div style="...">...</div>
</div>
</div>
Ejemplo 1: En este ejemplo, crearemos un texto emergente.
HTML
<!DOCTYPE html> <html> <head> <title>Onsen UI CSS Component Popover</title> <!-- 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 Popover(top) </strong> <div class="popover-mask"></div> <div class="popover popover--top" style="top: 150px; left: 350px;"> <div class="popover__arrow popover--top__arrow" style="margin-left: 25px;"></div> <div class="popover__content popover--top__content"> <div style="text-align: center; opacity: 0.8; margin: 20px;"> A Computer Science Portal for Geeks </div> </div> </div> </center> </body> </html>
Producción:
Ventana emergente del componente CSS de la interfaz de usuario de Onsen (arriba)
Ejemplo 2: en este ejemplo, crearemos una ventana emergente superior de tipo conversación, como si dos amigos estuvieran conversando.
HTML
<!DOCTYPE html> <html> <head> <title>Onsen UI CSS Component Popover</title> <!-- 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 Popover(top) </strong> <div class="popover-mask"></div> <div class="popover popover--top" style="top: 150px; left: 310px;"> <div class="popover__arrow popover--top__arrow" style="margin-left: 25px;"></div> <div class="popover__content popover--top__content"> <div style="text-align: center; opacity: 0.8; margin: 20px;"> Bro I am tensed about the placement </div> </div> </div> <div class="popover popover--top" style="top: 270px; left: 420px;"> <!-- Using the bottom arrow for better look --> <div class="popover__arrow popover--bottom__arrow" style="margin-left: 180px;"></div> <div class="popover__content popover--top__content"> <div style="text-align: center; opacity: 0.8; margin: 20px;"> GFG karlo, ho jayega It's the best platform </div> </div> </div> </center> </body> </html>
Producción:
Ventana emergente del componente CSS de la interfaz de usuario de Onsen (arriba)
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