Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS ofrece una ventana emergente que se utiliza para llamar la atención sobre elementos precisos de la interfaz de usuario, generalmente para indicar cualquier acción o para guiar a los usuarios a través de una nueva experiencia. En este artículo, discutiremos Popover Top-Right que muestra el mensaje en la parte superior derecha del elemento.
Primer CSS Popover Top-Right clases utilizadas:
- Popover: esta clase se utiliza para crear un elemento emergente. El resto de las clases emergentes deben incluirse dentro de esta clase.
- Popover-message–top-right: esta clase se usa para establecer el lado emergente del popover como el lado superior de la derecha.
Sintaxis:
<div class="position-relative text-right pr-2">
<button class="btn btn-primary">...</button>
<div class="Popover right-0 position-relative">
<div class="Popover-message Popover-message--top-right
text-left p-4 mt-2 Box color-shadow-large">
<h4 class="mb-2">...</h4>
<p>...</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">
...
</button>
</div>
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra el uso de Primer CSS Popover Top-Right.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Popover Top-Right</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="pr-12"> <h1 class="color-fg-success text-right"> GeeksforGeeks </h1> <h3 class="text-right"> Primer CSS Popover Top-Right </h3> <div class="position-relative text-right pr-2"> <button class="btn btn-primary">Hi! Geeks</button> <div class="Popover right-0 position-relative"> <div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box color-shadow-large"> <h4 class="mb-2">GeeksforGeeks</h4> <p> It is a Computer Science portal for all geeks across the world. </p> <button type="submit" class="btn btn-outline mt-2 text-bold"> Understood! </button> </div> </div> </div> </div> </body> </html>
Producción:
Primer CSS Popover arriba a la derecha
Ejemplo 2: a continuación se muestra otro ejemplo que demuestra el uso de Popover Top-Right con una imagen.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Popover Top-Right</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="pr-12"> <h1 class="color-fg-success text-right"> GeeksforGeeks </h1> <h3 class="text-right"> Primer CSS Popover Top-Right </h3> <div class="position-relative text-right pr-2"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220412130007/carnival.png" alt="gfg"> <div class="Popover right-0 position-relative"> <div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box color-shadow-large"> <h4 class="mb-2">Geeks Summer Carnival</h4> <p> GeeksforGeeks is finally back with Geeks Summer Carnival 2022 the most awaited 7-days long Summer Carnival fiesta starting on 5th April 2022 and wrapping on 11th April 2022, where coders, like you, can get a 110% return on your career growth investment. </p> <button type="submit" class="btn btn-outline mt-2 text-bold"> Visit </button> </div> </div> </div> </div> </body> </html>
Producción:
Primer CSS Popover arriba a la derecha
Referencia: https://primer.style/css/components/popover#top-right