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 attivati ​​per motivi di prestazioni, quindi devi inizializzarli tu stesso .
• I brindisi si nasconderanno automaticamente se non specifichi autohide: false.

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">&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.

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

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

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

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

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

<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="".

Metodi

$().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

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})