Los Spectre Popovers son uno de los componentes útiles de Spectre. Los popovers se usan en botones o en campos de entrada para notificar al usuario sobre para qué sirve el botón o qué pregunta el campo de entrada. También se puede usar como una notificación, como suponiendo que el usuario haya ingresado la contraseña, la ventana emergente puede aparecer desde el campo de entrada y resaltar la información incorrecta proporcionada por el usuario.
Para crear popovers, debe envolver el contenedor con la clase popover . Y agregue un contenedor con el popover-container al lado del elemento. Puede usar el componente Cards dentro del popover-container.
Se puede agregar la clase popover-right, popover-bottom, popover-top o popover-left para definir la posición. De forma predeterminada, las ventanas emergentes aparecen encima del elemento.
Clase de popovers de espectro:
- popover: esta clase se utiliza para crear un elemento popover. El resto de las clases emergentes deben incluirse dentro de esta clase.
- popover-container: esta clase se utiliza para crear un contenedor de popover, dentro de este se coloca el contenido de popover.
- popover-right: esta clase se usa para establecer el lado derecho del popover popover.
- popover-bottom: esta clase se usa para establecer la parte inferior del lado emergente del popover.
- popover-top: esta clase se utiliza para establecer la parte superior del lado emergente del popover.
- popover-left: esta clase se utiliza para establecer el lado izquierdo del popover popover.
Sintaxis:
<div class="popover popover-class">
...
<div class="popover-container">
...
</div>
</div>
El siguiente ejemplo ilustra los Popovers de Spectre:
Ejemplo: en este ejemplo, crearemos 4 botones y cada uno de los lados del popover se activará con ese botón.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>SPECTRE Popover Class</strong> <br><br> <div class="popover popover-right"> <button class="btn btn-success"> Right Popover </button> <div class="popover-container"> <div style="background-color: green"> <p class="text-large text-error"> Right Popover Class </p> </div> </div> </div> <div class="popover popover-top"> <button class="btn btn-success"> Top Popover </button> <div class="popover-container"> <div style="background-color: green"> <p class="text-large text-error"> Top Popover Class </p> </div> </div> </div> <div class="popover popover-bottom"> <button class="btn btn-success"> Bottom Popover </button> <div class="popover-container"> <div style="background-color: green"> <p class="text-large text-error"> Bottom Popover Class </p> </div> </div> </div> <div class="popover popover-left"> <button class="btn btn-success"> Left Popover </button> <div class="popover-container"> <div style="background-color: green"> <p class="text-large text-error"> Left Popover Class </p> </div> </div> </div> </center> </body> </html>
Producción:
Popovers de espectro
Referencia: https://picturepan2.github.io/spectre/components/popovers.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA