Los Spectre Toast se utilizan para mostrar notificaciones al usuario. Los brindis se utilizan para mostrar notificaciones sobre cualquier interacción del usuario. Se puede usar para alertar al usuario si alguna tarea ha pasado o fallado. Para crear un brindis, debe agregar un elemento contenedor con la clase brindis. Puede agregar cualquier texto dentro del contenedor e incluso íconos.
Clase de tostadas Spectre:
- brindis: esta clase se utiliza para crear el componente brindis.
- brindis-temacolor: Esta clase se utiliza para definir el color del tema del brindis como brindis-primario, brindis-éxito, etc. Puede elegir el color que desee.
Sintaxis:
<div class="toast ..."> .... </div>
Nota: También puede agregar un botón de cierre con la clase btn-clear si es necesario.
El siguiente ejemplo ilustra los brindis de Spectre
Ejemplo: En este ejemplo, crearemos dos brindis, uno será un brindis normal y otro se basará en un tema.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>SPECTRE Toasts Class</strong> <br><br> <div class="toast"> <big class="title"> Windows 11: </big> <small> A new update for based on your use </small> <button class="btn btn-clear"> </button> </div> <br> <div class="toast toast-success"> <big class="title"> Windows 10: </big> <small> Windows 11 update is ready </small> <button class="btn btn-clear"> </button> </div> </center> </body> </html>
Producción:
Tostadas de espectro
Referencia: https://picturepan2.github.io/spectre/components/toasts.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA