Primer CSS es un framework CSS gratuito y de código abierto. Se basa en los sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Creado con el sistema de diseño de GitHub, es altamente reutilizable y flexible.
Primer CSS Popovers se utilizan para llamar la atención de los usuarios sobre contenido específico. Esto suele ser una acción o un mensaje importante para los respectivos usuarios. Los popovers generalmente tienen dos clases importantes de la siguiente manera:
- Popover : elemento de bloque con posición absoluta
- Mensaje emergente : es el elemento secundario que es el contenido y el símbolo de intercalación.
El posicionamiento predeterminado del símbolo de intercalación está en el borde superior del mensaje Popover con centrado horizontalmente. Para cambiar su posición predeterminada, podemos usar las diferentes clases de variantes de Popover disponibles, que pueden ayudarnos a posicionar el signo de intercalación especificando los diferentes modificadores con el mensaje Popover.
Primer CSS Popover Variantes Clases:
- Popover-message–bottom : Caret bottom
- Mensaje emergente–derecha: Intercalación derecha
- Popover-message–left: Intercalación a la izquierda
- Popover-message–bottom-left: Caret abajo a la izquierda
- Popover-message–bottom-right: Caret abajo a la derecha
- Popover-message–left-bottom: Caret parte inferior izquierda
- Mensaje emergente–arriba a la izquierda: Intercalación arriba a la izquierda
- Popover-message–right-bottom: Intercalación abajo a la derecha
- Mensaje emergente–arriba a la derecha: Intercalación arriba a la derecha
- Mensaje emergente–arriba a la izquierda: Intercalación arriba a la izquierda
- Popover-message–top-right : Caret arriba a la derecha
- Popover-message–large: mayor ancho en pantallas de más de 544 px
Sintaxis : cree un popover de la siguiente manera:
<div class="d-flex flex-justify-center flex-items-center">
<div class="Popover position-relative">
<div class="Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large">
<h4 class="mb-2">GeeksforGeeks</h4>
<p>Welcome to GeeksforGeeks</p>
</div>
</div>
<button class="btn btn-primary">Popover</button>
</div>
Ejemplo 1: En el siguiente ejemplo, tenemos cuatro popovers diferentes en diferentes direcciones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding: 1em;"> <center> <div> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <strong>Primer CSS Popover Variants</strong> <br /> </center> <div class="d-flex flex-justify-center flex-items-center"> <div class="Popover position-relative"> <div class="Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large"> <h4 class="mb-2">GeeksforGeeks</h4> <p>Welcome to GeeksforGeeks</p> <button type="submit" class="btn btn-outline mt-2 text-bold"> Ok </button> </div> </div> <button class="btn btn-primary"> Popover Right </button> </div> <br /> <div class="d-flex flex-justify-center flex-items-center"> <button class="btn btn-primary"> Popover Left </button> <div class="Popover position-relative"> <div class="Popover-message Popover-message--left p-4 ml-2 Box color-shadow-large"> <h4 class="mb-2">GeeksforGeeks</h4> <p>Welcome to GeeksforGeeks</p> <button type="submit" class= "btn btn-outline mt-2 text-bold"> Ok </button> </div> </div> </div> <br /> <div class="position-relative pl-2"> <button class="btn btn-primary"> Popover Top-Left </button> <div class="Popover position-relative"> <div class="Popover-message Popover-message--top-left p-4 mt-2 Box color-shadow-large"> <h4 class="mb-2">GeeksforGeeks</h4> <p>Welcome to GeeksforGeeks</p> <button type="submit" class="btn btn-outline mt-2 text-bold"> Ok </button> </div> </div> </div> <br /> <div class="position-relative text-center"> <div class="Popover position-relative"> <div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large"> <h4 class="mb-2">GeeksforGeeks</h4> <p>Welcome to GeeksforGeeks</p> <button type="submit" class="btn btn-outline mt-2 text-bold"> Ok </button> </div> </div> <button class="btn btn-primary"> Popover Bottom </button> </div> </div> </body> </html>
Producción
Ejemplo 2: En el siguiente ejemplo, hemos creado una gran ventana emergente en la pantalla.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding: 1em;"> <center> <div> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <strong>Primer CSS Popover Variants</strong> <br /> </center> <div class="position-relative text-center"> <button class="btn btn-primary"> Popover Large </button> <div class="Popover right-0 left-0 position-relative"> <div class="Popover-message Popover-message--large text-left p-4 mt-2 Box color-shadow-large"> <h4 class="mb-2">GeeksforGeeks</h4> <p>Welcome to GeeksforGeeks</p> <button type="submit" class="btn btn-outline mt-2 text-bold"> Ok </button> </div> </div> </div> </div> </body> </html>
Producción
Referencia: https://primer.style/css/components/popover#variants
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA