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 popovers disponibles, pero en este artículo crearemos un popover material.
Onsen UI CSS Component Material Popover Clases:
- popover-mask: esta clase se usa para establecer un efecto de fondo gris para que se pueda ver el popover blanco predeterminado.*
- popover-mask–material: esta clase se usa para establecer un efecto de fondo de material
- popover: esta clase se utiliza para crear una interfaz popover.*
- popover–material: esta clase se utiliza para mostrar el popover
- popover–direction*: 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–material__arrow: esta clase se utiliza para representar la flecha de material.
- popover–direction*__arrow: esta clase se usa para rotar el diagrama en forma de flecha al lugar que desee.
- popover__content: esta clase se utiliza para colocar el área de contenido del popover.*
- popover–material__content: Esta clase se utiliza para colocar el área de contenido material.
- popover–direction*__content: esta clase se usa para colocar el área de contenido donde desea que aparezca la ventana emergente.
Nota: Las clases marcadas con * se utilizan en todos los popovers.
Sintaxis:
<div class="popover-mask
popover-mask--material">
</div>
<div class="popover
popover--material
popover--direction*"
style="...">
<div class="popover__arrow
popover--material__arrow
popover--direction*__arrow">
</div>
<div class="popover__content
popover--material__content
popover--direction*__content">
<div style="...">...</div>
</div>
</div>
Ejemplo 1:
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 Material Popover </strong> <div class="popover-mask popover-mask--material"> </div> <div class="popover popover--material popover--left" style="top: 150px; left: 355px;"> <div class="popover__arrow popover--left__arrow"> </div> <div class="popover__content popover--material__content popover--left__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:
Ejemplo 2:
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 Material Popover </strong> <div class="popover-mask popover-mask--material"></div> <div class="popover popover--material popover--left" style="top: 150px; left: 210px;"> <div class="popover__arrow popover--material__arrow popover--left__arrow"> </div> <div class="popover__content popover--material__content popover--left__content" style="background-color: gray;"> <div style="text-align: center; opacity: 0.8; margin: 20px;"> Which is best platform to learn DSA ? </div> </div> <div class="popover popover--material popover--right" style="top: 150px; left: 210px;"> <div class="popover__arrow popover--material__arrow popover--right__arrow"> </div> <div class="popover__content popover--material__content popover--left__content" style="background-color: green;"> <div style="text-align: center; opacity: 0.8; margin: 20px; background-color: yellow"> It's Geeksforgeeks bro </div> </div> </div> </div> </center> </body> </html>
Producción:
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