El elemento Primer CSS Toast se utiliza para mostrar mensajes importantes al usuario para mejorar la experiencia del usuario.
En este artículo, discutiremos Primer CSS Toast with Link. Al incluir un enlace en el brindis, podemos permitir que los usuarios realicen las acciones necesarias en respuesta al mensaje del brindis. Para incluir un enlace en el mensaje del brindis, envolvemos el texto de acción dentro del elemento <a> .
Primer CSS Toast con clases de enlace:
- Toast: esta clase es el contenedor principal del elemento brindis de Primer CSS.
- Toast-icon: esta clase envuelve el icono de brindis.
- Toast-content: esta clase contiene el mensaje de brindis junto con el enlace.
Sintaxis:
<div class="Toast-content">....<a href="">Action</a>....</div>
Ejemplo 1: En este ejemplo, incluiremos una acción dentro del contenido del brindis.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Toast with Link - Primer CSS</title> <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 - Toast with only Action</h4> </div> <div class="d-flex flex-justify-center"> <!-- Toast --> <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> <!-- Toast containing only action --> <span class="Toast-content"> <a href="https://geeksforgeeks.org"> GeeksforGeeks Home </a> </span> </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, incluiremos una acción junto con el mensaje de brindis.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Toast with Link - Primer CSS</title> <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 - Toast with Action with message</h4> </div> <div class="d-flex flex-justify-center"> <!-- Toast --> <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> <!-- Toast containing action with message --> <span class="Toast-content">Click here to go to <a href="https://geeksforgeeks.org"> GeeksforGeeks Home </a> </span> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/toasts#toast-with-link