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í.
Primer CSS Toast con descartar se usa para crear una interfaz en la que el usuario puede descartar explícitamente un Toast. Para crear esa interfaz, debe agregar la clase Toast-dismissButton en la clase Toast .
Primer CSS Toast con clase de descarte:
- Toast-dismissButton: esta clase se usa para permitir que un usuario descarte explícitamente un Toast.
Sintaxis:
<div class="Toast Toast--animateIn">
...
<button class="Toast-dismissButton">
...
</button>
</div>
Los siguientes ejemplos ilustran Primer CSS Toast with Dismiss.
Ejemplo 1: En este ejemplo, usaremos animate en animación en Toast with Dismiss.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Toast with Dismiss</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Toast With Dismiss</h3> </div> <div class="d-flex flex-justify-center"> <div class="Toast Toast--animateIn"> <span class="Toast-icon"> <svg class="octicon" xmlns="https://www.geeksforgeeks.org/" viewBox="0 0 15 15" width="25" height="25"> <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> </span> <span class="Toast-content"> GeeksforGeeks Loaded Successful </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:
Ejemplo 2: En este ejemplo, no usaremos ninguna animación en Toast with Dismiss.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Toast With Dismiss </h3> </div> <div class="d-flex flex-justify-center"> <div class="Toast"> <span class="Toast-icon"> <svg width="16" height="16" fill="currentColor" class="Toast--spinner bi bi-arrow-repeat" viewBox="0 0 16 16"> <path d="M11.534 7h3.932a.25.25 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/> <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/> </svg> </span> <span class="Toast-content"> Cancel your loading </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#toast-with-dismiss
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA