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, richiedeutil.js .
I brindisi sono attivabili 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.

L'effetto di animazione di questo componente dipende dalla prefers-reduced-motionmedia query. Consulta la sezione sui movimenti ridotti 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.

Ciao mondo! Questo è un messaggio di brindisi.

<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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Traslucido

Anche i toast sono leggermente traslucidi, quindi si fondono su qualsiasi cosa possano apparire. Per i browser che supportano la backdrop-filterproprietà CSS, tenteremo anche di sfocare gli elementi sotto un brindisi.

Ciao mondo! Questo è un messaggio di brindisi.

<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">&times;</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.

Vedere? Proprio come questo.

Attenzione, i brindisi si accumuleranno automaticamente

<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">&times;</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">&times;</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.

Ciao mondo! Questo è un messaggio di brindisi.

<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">&times;</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.

Vedere? Proprio come questo.

Attenzione, i brindisi si accumuleranno automaticamente

<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">&times;</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">&times;</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.

Ciao mondo! Questo è un messaggio di brindisi.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-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">&times;</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-liveregione . 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), invece di annunciare cosa è 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 momento successivo). 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 rolee aria-livein 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 delaytimeout per assicurarti che le persone 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.

Ciao mondo! Questo è un messaggio di 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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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.toastche 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.toastche si verifichi l'evento). Devi chiamare manualmente questo metodo se hai autohideeseguito 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.toast	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...
})