Cartilla CSS CSS
El Toast se usa para mostrar comentarios en vivo al usuario. La Posición se usa para especificar la posición del brindis agregando las clases de utilidad en un elemento contenedor de la ventana gráfica.
Primer CSS Clase de posición tostada:
- *posición: Se utiliza para especificar la posición del tostado. Por ejemplo, posición fija inferior-0 derecha-0.
Sintaxis:
<div class="*position">
<div class="Toast">
<span class="Toast-icon">
Content
</span>
<span class="Toast-content">
Content
</span>
</div>
</div>
Ejemplo 1: el siguiente código demuestra la posición de tostado de Primer CSS en la posición inferior derecha .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Toast Position </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 Position </h3> </div> <div class="position-fixed bottom-1 right-2"> <div class="Toast"> <span class="Toast-icon"> <svg class="octicon" 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- Bottom Right </span> </div> </div> </body> </html>
Producción:
Primer CSS Toast Posición en la posición inferior derecha
Ejemplo 2: este ejemplo demuestra la posición de tostado de Primer CSS en la posición superior izquierda .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Toast Position</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 Position</h3> </div> <div class="position-fixed top-0 left-0"> <div class="Toast"> <span class="Toast-icon"> <svg class="octicon" 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- Top left </span> </div> </div> </body> </html>
Producción:
Primer CSS Toast Posición en la posición superior izquierda
Referencia: https://primer.style/css/components/toasts#toast-position
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA