Toasts

Push notifiche à i vostri visitatori cù un brindisi, un missaghju d'alerta ligeru è facilmente persunalizabile.

I brindisi sò notifiche ligeri pensate per imità e notificazioni push chì sò state popularizate da i sistemi operativi mobili è desktop. Sò custruiti cù flexbox, cusì sò faciuli d'allineà è di pusà.

Panoramica

Cose da sapè quandu si usa u plugin toast:

Se custruite u nostru JavaScript da a fonte, hè necessariuutil.js .
I brindisi sò opt-in per ragioni di rendiment, cusì duvete inizializzalli voi stessu .
Per piacè nutate chì site rispunsevuli di posizionamentu di toast.
I brindisi si nasconderanu automaticamente se ùn specificate micca autohide: false.

L'effettu di l'animazione di stu cumpunente dipende da a prefers-reduced-motionmedia query. Vede a sezione di movimentu ridottu di a nostra documentazione d'accessibilità .

Esempii

Basic

Per incuragisce i brindisi extensibili è prevedibili, ricumandemu un capu è un corpu. L'intestazione di Toast usanu display: flex, chì permettenu un allinamentu faciule di u cuntenutu grazia à i nostri utilità di marge è flexbox.

I brindisi sò quant'è flessibili cum'è avete bisognu è anu pocu marcatu necessariu. À u minimu, avemu bisognu di un unicu elementu per cuntene u vostru cuntenutu "toastu" è incuragisce fermamente un buttone di scartà.

Salute, mondu ! Questu hè un missaghju 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>

Traslucente

I tostati sò ancu ligeramente traslucidi, cusì si mischianu nantu à tuttu ciò chì ponu appare. Per i navigatori chì supportanu a backdrop-filterpruprietà CSS, pruveremu ancu di sbulicà l'elementi sottu un brindisi.

Salute, mondu ! Questu hè un missaghju 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>

Stacking

Quandu avete parechje brindisi, avemu predeterminatu à impilà verticalmente in una manera leggibile.

Vede? Cum'è questu.

A testa alta, i brindisi s'impilanu 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>

Placement

Pone i brindisi cù CSS persunalizati cum'è ne avete bisognu. A cima à diritta hè spessu usata per e notificazioni, cum'è a cima media. Sè vo site solu per mostrà un brindisi à u tempu, mette i stili di pusizzioni ghjustu nantu à u .toast.

Salute, mondu ! Questu hè un missaghju 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 chì generanu più notificazioni, cunzidira l'usu di un elementu di imballaggio per pudè stack facilmente.

Vede? Cum'è questu.

A testa alta, i brindisi s'impilanu 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>

Pudete ancu fà fantasia cù l'utilità flexbox per allineà i tostati orizontali è / o verticali.

Salute, mondu ! Questu hè un missaghju 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="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>

L'accessibilità

I brindisi sò destinati à esse picculi interruzzioni à i vostri visitatori o utilizatori, cusì per aiutà à quelli chì anu lettori di schermu è tecnulugii d'assistenza simili, duvete imballà i vostri brindisi in una aria-liveregione . I cambiamenti à e regioni in diretta (cum'è l'iniezione / l'aghjurnà di un cumpunente di brindisi) sò automaticamente annunziati da i lettori di schermu senza avè bisognu di spustà u focus di l'utilizatore o altrimenti interrompe l'utilizatore. Inoltre, include aria-atomic="true"per assicurà chì tuttu u brindisi hè sempre annunziatu cum'è una sola unità (atomica), invece di annunzià ciò chì hè statu cambiatu (chì puderia purtà à prublemi se aghjurnà solu una parte di u cuntenutu di u brindisi, o se mostra u listessu cuntenutu di brindisi à un puntu dopu in u tempu). Se l'infurmazioni necessarii sò impurtanti per u prucessu, per esempiu per una lista di errori in una forma, allora utilizate u cumpunente d'alertainvece di toast.

Nota chì a regione live deve esse presente in u marcatu prima chì u brindisi hè generatu o aghjurnatu. Se generate dinamicamente tramindui à u stessu tempu è inject in a pagina, in generale ùn saranu micca annunziati da e tecnulugia assistive.

Avete ancu bisognu di adattà u livellu roleè aria-livesecondu u cuntenutu. S'ellu hè un missaghju impurtante cum'è un errore, utilizate role="alert" aria-live="assertive", altrimente utilizate role="status" aria-live="polite"attributi.

Cume u cuntenutu chì mostrate cambia, assicuratevi di aghjurnà u delaytimeout per assicurà chì e persone anu abbastanza tempu per leghje u 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>

Quandu si usa autohide: false, duvete aghjunghje un buttone vicinu per permette à l'utilizatori di scaccià u brindisi.

Salute, mondu ! Questu hè un missaghju 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>

Cumportamentu JavaScript

Usu

Inizializza i brindisi via JavaScript:

$('.toast').toast(option)

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-animation="".

Nome	Tipu	Default	Descrizzione
animazione	booleanu	veru	Applica una transizione di fade CSS à u brindisi
autohide	booleanu	veru	Oculta automaticamente u brindisi
ritardu	numeru	`500`	Ritarda di ammuccià u brindisi (ms)

I metudi

Metudi asincroni è transizioni

Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .

Vede a nostra documentazione JavaScript per più infurmazione .

`$().toast(options)`

Attachs a toast handler to an element collection.

`.toast('show')`

Revela un brindisi di l'elementu. Ritorna à u chjamante prima chì u brindisi hè statu veramente mostratu (vale à dì prima chì l' shown.bs.toastavvenimentu si faci). Avete da chjamà manualmente stu metudu, invece u vostru brindisi ùn mostrarà micca.

$('#element').toast('show')

`.toast('hide')`

Nasconde u brindisi di un elementu. Ritorna à u chjamante prima chì u brindisi hè statu oculatu (vale à dì prima chì l' hidden.bs.toastavvenimentu si faci). Avete da chjamà manualmente stu metudu se avete fattu autohideà false.

$('#element').toast('hide')

`.toast('dispose')`

Nasconde u brindisi di un elementu. U vostru brindisi fermarà nantu à u DOM ma ùn si mostra più.

$('#element').toast('dispose')

Avvenimenti

Tipu d'avvenimentu	Descrizzione
mostra.bs.toast	Questu avvenimentu spara immediatamente quandu u `show`metudu di istanza hè chjamatu.
mostratu.bs.toast	Questu avvenimentu hè sparatu quandu u brindisi hè statu resu visibile à l'utilizatore.
nascondere.bs.toast	Questu avvenimentu hè sparatu immediatamente quandu u `hide`metudu di istanza hè statu chjamatu.
hidden.bs.toast	Questu avvenimentu hè sparatu quandu u brindisi hà finitu di esse oculatu da l'utilizatore.

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