Primer CSS es un marco CSS que está diseñado para iniciar su proyecto web con un sistema de diseño prefabricado que incluye espaciado, tipografía, color y muchos componentes y utilidades. Sigue el enfoque BEM (Bloque, Elemento y Modificador) para nombrar las clases CSS.
Primer CSS Toasts se utilizan para mostrar comentarios en vivo al usuario. Para crear un brindis predeterminado , se utiliza la clase Toast . El brindis predeterminado incluye un icono y un mensaje. El mensaje del brindis también se puede formatear. Se sugiere usar el ícono de información y mantener el mensaje de brindis por debajo de los 140 caracteres.
Primer CSS Toast Clases predeterminadas:
- Toast: esta clase es el contenedor principal del elemento Toast de Primer CSS.
- Toast-icon: esta clase envuelve el icono de brindis.
- Toast-content: esta clase contiene el mensaje de brindis.
Sintaxis:
<div class="Toast">
...
<div>
Ejemplo 1: este ejemplo muestra el uso de la clase Toast para crear un brindis predeterminado.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2 style="color:green">GeeksforGeeks</h2> <h4>Primer CSS - Default Toast</h4> </div> <div class="d-flex flex-justify-center"> <!-- Toast --> <div class="Toast"> <span class="Toast-icon"> <!-- SVG for the "info" icon --> <svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true"> <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" /> </svg> </span> <span class="Toast-content"> GeeksforGeeks is Awesome. </span> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo muestra el texto predeterminado con un mensaje de brindis con formato.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2 style="color:green"> GeeksforGeeks </h2> <h4>Primer CSS - Default Toast with Formatted message</h4> </div> <div class="d-flex flex-justify-center"> <!-- Toast --> <div class="Toast"> <span class="Toast-icon"> <!-- SVG for the "info" icon --> <svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true"> <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" /> </svg> </span> <span class="Toast-content"> <b>GeeksforGeeks</b> is <i>Awesome</i>. </span> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/toasts#default
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA