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.
Primer CSS ofrece Toast que se utiliza para mostrar al usuario respuestas en vivo y sensibles al tiempo. En este artículo, discutiremos las variaciones de Toast. Se utiliza para comunicar diferentes estados mediante modificadores de error, advertencia y éxito.
Primer CSS Toasts Clases de variaciones:
- Toast: esta clase es el contenedor principal del elemento brindis de Primer CSS.
- Toast-icon: esta clase se utiliza para definir el icono de tostadas.
- Toast-success: esta clase se utiliza para crear iconos de tostadas de color verde.
- Toast-content: esta clase contiene el mensaje de brindis junto con el enlace.
- Toast-error: esta clase contiene el mensaje de error de tostadas.
Sintaxis:
<div class="Toast Toast--success">
<span class="Toast-icon">
<svg width="..." height="..." viewBox="..."
class="octicon octicon-check" aria-hidden="true">
<path fill-rule="evenodd" d="..." />
</svg>
</span>
<span class="Toast-content">
...
</span>
</div>
Ejemplo 1: a continuación se muestra el ejemplo que demuestra el uso de las variaciones de Primer CSS Toasts utilizando la clase Toast-error .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Primer CSS Toast Variations</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Toast Variations</h3> <div class="Toast Toast--error"> <span class="Toast-icon"> <svg width="16" height="16" fill="currentColor" class="bi bi-bank2" viewBox="0 0 16 16"> <path d="M8.277.084a.5.5 0 0 0-.554 0l-7.5 5A.5.5 0 0 0 .5 6h1.875v7H1.5a.5.5 0 0 0 0 1h13a.5.5 0 1 0 0-1h-.875V6H15.5a.5.5 0 0 0 .277-.916l-7.5-5zM12.375 6v7h-1.25V6h1.25zm-2.5 0v7h-1.25V6h1.25zm-2.5 0v7h-1.25V6h1.25zm-2.5 0v7h-1.25V6h1.25zM8 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM.5 15a.5.5 0 0 0 0 1h15a.5.5 0 1 0 0-1H.5z"/> </svg> </span> <span class="Toast-content"> GeeksforGeeks, Computer Science portal. </span> </div> </center> </body> </html>
Producción:
Primer CSS Tostadas Variaciones
Ejemplo 2: a continuación se muestra el ejemplo que demuestra el uso de las variaciones de Primer CSS Toasts utilizando la clase Toast–warning .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Primer CSS Toast Variations</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Toast Variations</h3> <div class="Toast Toast--warning"> <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"> GeeksforGeeks, Computer Science portal. </span> </div> </center> </body> </html>
Producción:
Primer CSS Tostadas Variaciones
Referencia: https://primer.style/css/components/toast#variations