Primer CSS Tostadas

Posted on by Rudeus Greyrat

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.

Toast es un tipo de mensaje de alerta o notificación automática, generalmente utilizado para notificar o mostrar información breve o comentarios urgentes a los usuarios.

Primer CSS Tostadas:

  • Predeterminado : este es el aviso predeterminado que se usa para agregar un mensaje predeterminado. 
  • Variaciones: el brindis tiene varias variaciones, por lo que utiliza los modificadores de éxito, advertencia y error para comunicar diferentes estados.
  • Toast con descarte: Permite al usuario despedir un Toast.
  • Brindis con enlace: Permite al usuario agregar un enlace dentro de un brindis.
  • Animación de brindis en : Permite al usuario agregar animación dentro y fuera de un brindis.
  • Brindis con animación de carga : permite al usuario una rueda de carga.
  • Posición del brindis : Esto se usa para colocar los brindis en la parte inferior izquierda de la ventana gráfica, es decir, usando la posición fija inferior-0 izquierda-0.

Sintaxis:

<div class="Primer-CSS-Toasts">
    ...
<div>

Ejemplo 1: El siguiente ejemplo demuestra las variaciones de tostado en Primer CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0" />
    <title>Primer CSS Toast</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="m-4 pt-4">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <h2>
            Primer CSS Toast
        </h2>
    </div>
  
    <div class="p-1">
        <div class="Toast Toast--success">
            <span class="Toast-icon">
                <svg width="12" height="16" 
                     viewBox="0 0 12 16" 
                     class="octicon octicon-check" 
                     aria-hidden="true">
                    <path fill-rule="evenodd" 
                        d="M12 5l-8 8-4-4 1.5-1.5L4 
                           10l6.5-6.5L12 5z" />
                </svg>
            </span>
            <span class="Toast-content">
                Thanks for signing up.
            </span>
        </div>
    </div>
  
    <div class="p-1">
        <div class="Toast Toast--warning">
            <span class="Toast-icon">
                <svg width="16" height="16" 
                     viewBox="0 0 16 16" 
                     class="octicon octicon-alert" 
                     aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 
                        13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 
                        0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 
                        11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z" />
                </svg>
            </span>
            <span class="Toast-content">
                You have 1 warning.
            </span>
        </div>
    </div>
  
    <div class="p-1">
        <div class="Toast Toast--error">
            <span class="Toast-icon">
                <svg width="14" height="16" 
                     viewBox="0 0 14 16" 
                     class="octicon octicon-stop" 
                     aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 
                        9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 
                        5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z" />
                </svg>
            </span>
            <span class="Toast-content">
                Don't click here
            </span>
        </div>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra el brindis con un enlace y el botón de cerrar en Primer CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <title> Primer CSS Toast </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="m-4">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <h2>
            Primer CSS Toast
        </h2>
    </div>
    <div class="p-1">
        <div class="Toast">
            <span class="Toast-icon">
                <svg width="12" 
                     height="16" 
                     viewBox="0 0 12 16" 
                     class="octicon octicon-check" 
                     aria-hidden="true">
                    <path fill-rule="evenodd" 
                          d="M12 5l-8 8-4-4 1.5-1.5L4 
                           10l6.5-6.5L12 5z" />
                </svg>
            </span>
            <span class="Toast-content">
                Click to 
                <a href="https://www.geeksforgeeks.org/">
                    GeeksforGeeks
                </a>
            </span>
            <button class="Toast-dismissButton">
                <svg width="12" 
                     height="16"
                     viewBox="0 0 12 16" 
                     class="octicon octicon-x" 
                     aria-hidden="true">
                 <path fill-rule="evenodd" 
                       d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 
                         3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 
                         6.52l3.75-3.75 1.48 1.48L7.48 8z" /> 
                </svg>
            </button>
        </div>
    </div>
</body>
</html>

Producción:  

 

Referencia: https://primer.style/css/components/toasts

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 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 *