Brindisi

Notifiche push ai tuoi visitatori con un brindisi, un messaggio di avviso leggero e facilmente personalizzabile.

Su questa pagina

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:

I brindisi sono attivati per motivi di prestazioni, quindi devi inizializzarli tu stesso .
I brindisi si nasconderanno automaticamente se non specifichi autohide: false.

L'effetto di animazione di questo componente dipende dalla prefers-reduced-motionmedia 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.

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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

In precedenza, i nostri script aggiungevano dinamicamente la .hideclasse per nascondere completamente un brindisi (con display:none, anziché solo con opacity:0). Questo ora non è più necessario. Tuttavia, per compatibilità con le versioni precedenti, il nostro script continuerà a alternare la classe (anche se non ce n'è bisogno pratico) fino alla prossima versione principale.

Esempio dal vivo

Fai 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.

Ciao mondo! Questo è un messaggio di brindisi.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Usiamo il seguente JavaScript per attivare la nostra demo di brindisi dal vivo:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Traslucido

I toast sono leggermente traslucidi per fondersi con ciò che c'è sotto di loro.

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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Impilamento

Puoi impilare i toast avvolgendoli in un contenitore per toast, che aggiungerà una certa spaziatura verticalmente.

Vedere? Proprio come questo.

Attenzione, i brindisi si accumuleranno automaticamente

<div class="toast-container">
  <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 class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Contenuti personalizzati

Personalizza i tuoi brindisi rimuovendo i sottocomponenti, modificandoli con le utilità o aggiungendo il tuo markup. Qui abbiamo creato un brindisi più semplice rimuovendo l'impostazione predefinita .toast-header, aggiungendo un'icona Nascondi personalizzata da Bootstrap Icons e utilizzando alcune utilità flexbox per regolare il layout.

Ciao mondo! Questo è un messaggio di brindisi.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

In alternativa, puoi anche aggiungere ulteriori controlli e componenti ai brindisi.

Ciao mondo! Questo è un messaggio di brindisi.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Combinazioni di colori

Basandosi sull'esempio sopra, puoi creare diverse combinazioni di colori di toast con le nostre utilità di colore e sfondo . Qui abbiamo aggiunto .bg-primarye .text-whiteal .toast, e poi aggiunto .btn-close-whiteal nostro pulsante di chiusura. Per un bordo nitido, rimuoviamo il bordo predefinito con .border-0.

Ciao mondo! Questo è un messaggio di brindisi.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </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.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </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" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <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 class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 w-100">

  <!-- Then put toasts within -->
  <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 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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), 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 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 in modo che gli utenti abbiano abbastanza tempo per leggere il brindisi.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-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-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 delaytimeout 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.

Sass

Variabili

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba($black, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Utilizzo

Inizializza i brindisi tramite JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Trigger

Il licenziamento può essere ottenuto con l' dataattributo su un pulsante all'interno del brindisi , come mostrato di seguito:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

o su un pulsante fuori dal brindisi usando data-bs-targetcome mostrato di seguito:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-bs-, come in data-bs-animation="".

Nome	Tipo	Predefinito	Descrizione
`animation`	booleano	`true`	Applica una transizione di dissolvenza CSS al brindisi
`autohide`	booleano	`true`	Nascondi automaticamente il brindisi
`delay`	numero	`5000`	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 .

mostrare

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.

toast.show()

nascondere

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.

toast.hide()

smaltire

Nasconde il brindisi di un elemento. Il tuo brindisi rimarrà sul DOM ma non verrà più mostrato.

toast.dispose()

getInstance

Metodo statico che ti consente di ottenere l'istanza di toast associata a un elemento DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Metodo statico che ti consente di ottenere l'istanza di toast associata a un elemento DOM o di crearne una nuova nel caso non sia stata inizializzata

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Eventi

Tipo di evento	Descrizione
`show.bs.toast`	Questo evento viene attivato immediatamente quando `show`viene chiamato il metodo dell'istanza.
`shown.bs.toast`	Questo evento viene attivato quando il brindisi è stato reso visibile all'utente.
`hide.bs.toast`	Questo evento viene generato immediatamente quando `hide`viene chiamato il metodo dell'istanza.
`hidden.bs.toast`	Questo evento viene generato quando il brindisi ha finito di essere nascosto all'utente.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})