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 orientado 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 Popover 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 Right-top que muestra el mensaje en el lado superior derecho del elemento.
Primer CSS Popover Clases usadas arriba a la derecha:
- Popover: esta clase se utiliza para crear un elemento emergente. El resto de las clases emergentes deben incluirse dentro de esta clase.
- Popover-message–right-top: Esta clase se usa para establecer el popover pop como el lado superior derecho de un elemento.
Sintaxis:
<div class="d-flex flex-justify-center flex-items-start">
<div class="Popover position-relative">
<div class="Popover-message Popover-message--right-top
p-4 mr-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>
<button class="btn btn-primary">
...
</button>
</div>
Ejemplo 1: a continuación se muestra el ejemplo que demuestra el uso de Primer CSS Popover Right-top.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Popover Right-top</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h3 class="text-center"> Primer CSS Popover Right-top. </h3> <div class="d-flex flex-justify-center flex-items-start mt-3"> <div class="Popover position-relative"> <div class="Popover-message Popover-message--right-top p-4 mr-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> <button class="btn btn-primary"> Hi! Geeks </button> </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 Primer CSS Popover Right-top usando una imagen.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Popover Right-top</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h3 class="text-center"> Primer CSS Popover Right-top. </h3> <div class="d-flex flex-justify-center flex-items-start mt-3"> <div class="Popover position-relative"> <div class="Popover-message Popover-message--right-top p-4 mr-2 Box color-shadow-large"> <h4 class="mb-2"> Data Structures and Algorithms - Self Paced </h4> <p> Most popular course on DSA trusted by over 75,000 students! Built with years of experience by industry experts and gives you a complete package of video lectures, practice problems, quizzes, discussion forums and contests. Start Today! </p> <button type="submit" class="btn btn-primary mt-2 text-bold"> Buy Now </button> </div> </div> <img height="150px" width="150px" alt="gfg" src= "https://media.geeksforgeeks.org/img-practice/mentors/91578d3b1519643ba6a211b406b0dd1a16d93eac.png"> </div> </body> </html>
Producción:
Primer CSS Popover Arriba a la derecha
Referencia: https://primer.style/css/components/popover#right-top
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA