Primer CSS Popover Abajo a la derecha

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 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 la parte inferior derecha de Popover que muestra el mensaje en la parte inferior derecha del elemento.

Primer CSS Popover clases de la parte inferior 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–bottom-right: esta clase se usa para establecer el lado emergente del popover como el lado derecho de la parte inferior.

Sintaxis:

<div class="position-relative text-right pr-2">
  <div class="Popover position-relative">
      <div class="Popover-message Popover-message--bottom-right 
         p-4 mb-2 text-left Box color-shadow-large">        
        <p>...</p>
        <button type="submit" class="btn btn-outline mt-2 text-bold">
               ...
        </button>
      </div>
      <button class="btn btn-primary">...</button>
  </div>
</div>

Ejemplo 1: El siguiente ejemplo demuestra el uso de Primer CSS Popover bottom-right .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Popover Bottom-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 Bottom-right </h3>
      
        <div class="position-relative text-right mt-3">
            <div class="Popover position-relative">
                <div class="Popover-message Popover-message--bottom-right 
                  p-4 mb-2 text-left 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>
    </div>    
</body>
</html>

 Producción:

Primer CSS Popover Abajo a la derecha

Ejemplo 2: a continuación se muestra otro ejemplo que demuestra el uso de Primer CSS Popover abajo a la derecha usando una imagen

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Popover Bottom-right </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <h1 class="color-fg-success text-right pr-12"> 
        GeeksforGeeks
    </h1>
      
    <h3 class="text-right pr-12"> 
        Primer CSS Popover Bottom-right
    </h3>
  
    <div class="position-relative text-right pr-12">
        <div class="Popover position-relative">
            <div class="Popover-message 
                Popover-message--bottom-right 
                p-4 mb-2 text-left 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">
                    Got it!
                </button>
            </div>
        </div>
  
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220412130007/carnival.png"
            alt="gfg">
    </div>
</body>
  
</html>

Producción:

Primer CSS Popover Abajo a la derecha

Referencia: https://primer.style/css/components/popover#bottom-right

Publicación traducida automáticamente

Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *