Brindisi
Notifiche push ai tuoi visitatori con un brindisi, un messaggio di avviso leggero e facilmente personalizzabile.
I brindisi sono notifiche leggere progettate per imitare le notifiche push che sono state rese popolari dai sistemi operativi mobili e desktop. Sono costruiti con flexbox, quindi sono facili da allineare e posizionare.
Panoramica
Cose da sapere quando si utilizza il plug-in toast:
- Se stai creando il nostro JavaScript dal sorgente, richiede
util.js
. - I brindisi sono attivati per motivi di prestazioni, quindi devi inizializzarli tu stesso .
- Tieni presente che sei responsabile del posizionamento dei brindisi.
- I brindisi si nasconderanno automaticamente se non specifichi
autohide: false
.
prefers-reduced-motion
media query. Vedi la
sezione movimento ridotto della nostra documentazione sull'accessibilità .
Esempi
Di base
Per incoraggiare brindisi estensibili e prevedibili, consigliamo un'intestazione e un corpo. Le intestazioni Toast utilizzano display: flex
, consentendo un facile allineamento dei contenuti grazie alle nostre utility margin e flexbox.
I brindisi sono flessibili quanto ti serve e hanno pochissimo markup richiesto. Come minimo, abbiamo bisogno di un singolo elemento per contenere i tuoi contenuti "tostati" e incoraggiare fortemente un pulsante di eliminazione.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Abitare
Fare clic sul pulsante in basso per mostrare un brindisi (posizionato con le nostre utilità nell'angolo in basso a destra) che è stato nascosto per impostazione predefinita con .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Traslucido
I toast sono leggermente traslucidi per fondersi con ciò che c'è sotto di loro.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Impilamento
Quando hai più brindisi, per impostazione predefinita li impilamo verticalmente in modo leggibile.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
Posizionamento
Posiziona i brindisi con CSS personalizzati quando ne hai bisogno. L'angolo in alto a destra viene spesso utilizzato per le notifiche, così come l'angolo in alto al centro. Se intendi mostrare solo un brindisi alla volta, metti gli stili di posizionamento direttamente sul .toast
.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Per i sistemi che generano più notifiche, prendi in considerazione l'utilizzo di un elemento di wrapping in modo che possano essere facilmente impilati.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
<div style="position: absolute; top: 0; right: 0;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
Puoi anche divertirti con le utility flexbox per allineare i toast orizzontalmente e/o verticalmente.
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Accessibilità
I brindisi sono intesi come piccole interruzioni per i tuoi visitatori o utenti, quindi per aiutare gli utenti con lettori di schermo e tecnologie assistive simili, dovresti avvolgere i brindisi in una aria-live
regione . Le modifiche alle regioni attive (come l'inserimento/l'aggiornamento di un componente brindisi) vengono annunciate automaticamente dagli screen reader senza che sia necessario spostare l'attenzione dell'utente o interrompere in altro modo l'utente. Inoltre, includi aria-atomic="true"
per assicurarti che l'intero brindisi sia sempre annunciato come una singola unità (atomica), anziché semplicemente annunciare ciò che è stato modificato (il che potrebbe causare problemi se aggiorni solo una parte del contenuto del brindisi o se visualizzi lo stesso contenuto del brindisi in un secondo momento). Se le informazioni necessarie sono importanti per il processo, ad esempio per un elenco di errori in un modulo, utilizzare il componente di avvisoal posto del pane tostato.
Tieni presente che la regione attiva deve essere presente nel markup prima che il brindisi venga generato o aggiornato. Se li generi dinamicamente entrambi contemporaneamente e li inserisci nella pagina, generalmente non verranno annunciati dalle tecnologie assistive.
È inoltre necessario adattare il livello role
e aria-live
in base al contenuto. Se è un messaggio importante come un errore, usa role="alert" aria-live="assertive"
, altrimenti usa gli role="status" aria-live="polite"
attributi.
Man mano che il contenuto che stai visualizzando cambia, assicurati di aggiornare il delay
timeout in modo che gli utenti abbiano abbastanza tempo per leggere il brindisi.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
Quando si utilizza autohide: false
, è necessario aggiungere un pulsante di chiusura per consentire agli utenti di ignorare il brindisi.
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Sebbene tecnicamente sia possibile aggiungere controlli attivabili/azionabili (come pulsanti o collegamenti aggiuntivi) nel tuo avviso popup, dovresti evitare di farlo per nascondere automaticamente i brindisi. Anche se si concede un lungo delay
timeout del brindisi , gli utenti della tastiera e della tecnologia assistiva potrebbero avere difficoltà a raggiungere il brindisi in tempo per agire (poiché i brindisi non ricevono lo stato attivo quando vengono visualizzati). Se devi assolutamente avere ulteriori controlli, ti consigliamo di utilizzare un brindisi con autohide: false
.
Comportamento JavaScript
Utilizzo
Inizializza i brindisi tramite JavaScript:
$('.toast').toast(option)
Opzioni
Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-
, come in data-animation=""
.
Nome | Tipo | Predefinito | Descrizione |
---|---|---|---|
animazione | booleano | VERO | Applica una transizione di dissolvenza CSS al brindisi |
nascondi automaticamente | booleano | VERO | Nascondi automaticamente il brindisi |
ritardo | numero | 500 |
Ritardo nascondendo il brindisi (ms) |
Metodi
Metodi e transizioni asincrone
Tutti i metodi API sono asincroni e avviano una transizione . Ritornano al chiamante non appena la transizione è iniziata ma prima che termini . Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata .
Consulta la nostra documentazione JavaScript per ulteriori informazioni .
$().toast(options)
Allega un gestore di avvisi popup a una raccolta di elementi.
.toast('show')
Rivela il brindisi di un elemento. Ritorna al chiamante prima che il brindisi sia stato effettivamente mostrato (cioè prima shown.bs.toast
che si verifichi l'evento). Devi chiamare manualmente questo metodo, invece il tuo brindisi non verrà mostrato.
$('#element').toast('show')
.toast('hide')
Nasconde il brindisi di un elemento. Ritorna al chiamante prima che il brindisi sia stato effettivamente nascosto (cioè prima hidden.bs.toast
che si verifichi l'evento). Devi chiamare manualmente questo metodo se hai autohide
eseguito false
.
$('#element').toast('hide')
.toast('dispose')
Nasconde il brindisi di un elemento. Il tuo brindisi rimarrà sul DOM ma non verrà più mostrato.
$('#element').toast('dispose')
Eventi
Tipo di evento | Descrizione |
---|---|
mostra.bs.brindisi | Questo evento viene attivato immediatamente quando show viene chiamato il metodo dell'istanza. |
mostrato.bs.brindisi | Questo evento viene attivato quando il brindisi è stato reso visibile all'utente. |
nascondi.bs.brindisi | Questo evento viene generato immediatamente quando hide viene chiamato il metodo dell'istanza. |
brindisi.nascosti | Questo evento viene generato quando il brindisi ha finito di essere nascosto all'utente. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})