Bootstrap - Toasts: Una Guida Amichevole per i Principianti

Ciao هناك, futuri sviluppatori web! Oggi esploreremo il meraviglioso mondo dei Toast di Bootstrap. Non preoccuparti se non ne hai mai sentito parlare prima - alla fine di questo tutorial, sarai in grado di fare Toast come un professionista! ?

Bootstrap - Toasts

Cos'è un Toast di Bootstrap?

Prima di immergerci, parliamo di cosa sono i Toast. Immagina di utilizzare un'app mobile e, suddenemente, una piccola notifica appare in fondo allo schermo. Questo è essenzialmente ciò che è un Toast nello sviluppo web! È una notifica leggera progettata per imitare le notifiche push che vediamo sui dispositivi mobili.

Toast di Base

Iniziamo con un Toast di base. Ecco come si presenta nel codice:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 minuti fa</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Chiudi"></button>
</div>
<div class="toast-body">
Ciao, mondo! Questo è un messaggio Toast.
</div>
</div>

Analizziamo questo:

Il div esterno con la classe toast è il nostro contenitore principale.
all'interno, abbiamo un toast-header e un toast-body.
L'header di solito contiene un'immagine, un titolo, una data e un pulsante di chiusura.
Il corpo è dove va il nostro messaggio principale.

Toast in Tempo Reale

Ora, rendiamo il nostro Toast vivente! Per fare questo, abbiamo bisogno di un po' di JavaScript:

<button type="button" class="btn btn-primary" id="liveToastBtn">Mostra Toast in tempo reale</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 minuti fa</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Chiudi"></button>
</div>
<div class="toast-body">
Ciao, Mondo! Questo è un messaggio di Toast in tempo reale.
</div>
</div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>

Qui, abbiamo aggiunto un pulsante che, quando viene cliccato, mostrerà il nostro Toast. Il JavaScript in fondo ascolta il clic e poi mostra il Toast.

Toast Trasparente

Vuoi rendere il tuo Toast un po' trasparente? Basta aggiungere la classe bg-light:

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 minuti fa</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Chiudi"></button>
</div>
<div class="toast-body">
Ciao, Mondo! Questo è un Toast trasparente.
</div>
</div>

Toast Staccati

E se vuoi mostrare più Toast? Nessun problema! Bootstrap li stackerà in modo ordinato:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>adesso</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Chiudi"></button>
</div>
<div class="toast-body">
Vedi? Proprio così.
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>2 secondi fa</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Chiudi"></button>
</div>
<div class="toast-body">
Attenzione, i Toast si stackeranno automaticamente
</div>
</div>
</div>

Contenuto Personalizzato

I Toast non sono limitati solo al testo. Puoi aggiungere qualsiasi contenuto HTML che desideri:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Ciao, mondo! Questo è un messaggio di Toast.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Esegui azione</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Chiudi</button>
</div>
</div>
</div>

Qui, abbiamo aggiunto pulsanti al corpo del Toast. Diventa creativo!

Schema di Colori

I Toast possono venire in diversi colori per abbinarsi al tema del tuo sito o per indicare diversi tipi di messaggi:

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 minuti fa</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Chiudi"></button>
</div>
<div class="toast-body">
Ciao, mondo! Questo è un Toast primario.
</div>
</div>

Puoi sostituire bg-primary con bg-success, bg-danger, bg-warning, ecc.

Posizionamento dei Toast

I Toast possono essere posizionati ovunque nella tua pagina. Ecco come posizionarli nell'angolo in alto a destra:

<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Il tuo Toast qui -->
</div>
</div>

Accessibilità

L'accessibilità è fondamentale! Assicurati sempre di includere gli attributi role="alert" e aria-live="assertive" per garantire che i lettori di schermo possano annunciare correttamente i tuoi Toast.

Ecco una tabella che riassume i metodi chiave dei Toast:

Metodo	Descrizione
show()	Mostra il Toast
hide()	Nasconde il Toast
dispose()	Nasconde il Toast e lo rimuove dal DOM

E questo è tutto! Ora sei un maestro del Toast. Ricorda, la pratica rende perfetti, quindi prova a integrare questi elementi nel tuo prossimo progetto. Buon codice! ?

Credits: Image by storyset