Passà à u cuntenutu principale Salta à a navigazione di documenti
Check
in English

Toasts

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

In sta pagina

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:

  • I brindisi sò opt-in per ragioni di rendiment, cusì duvete inizializzalli voi stessu .
  • 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à.

html 
<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 anu aghjustatu dinamicamente a .hideclasse per ammuccià cumplettamente un brindisi (cù display:none, piuttostu cà solu cù opacity:0). Avà ùn hè più necessariu. In ogni casu, per a cumpatibilità inversa, u nostru script continuerà à cambià a classe (ancu s'ellu ùn ci hè micca bisognu praticu) finu à a prossima versione maiò.

Esempiu live

Cliccate u buttone sottu per vede un brindisi (pusitu cù i nostri utilità in l'angulu inferjuri à destra) chì hè statu oculatu per difettu.

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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>

Utilizemu u seguente JavaScript per attivà a nostra demo di brindisi in diretta:

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

    toast.show()
  })
}

Traslucente

I toast sò ligeramente traslucidi per mischjà cù ciò chì ci hè sottu.

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

Stacking

Pudete stack toasts impannillanduli in un cuntainer di toast, chì aghjunghje verticalmente un pocu di spazii.

html 
<div class="toast-container position-static">
  <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>

Cuntinutu persunalizatu

Personalizà i vostri brindisi sguassate i sub-cumpunenti, aghjustendu cù utilità , o aghjunghjendu u vostru propiu marcatu. Quì avemu creatu un brindisi più simplice sguassendu u predeterminatu .toast-header, aghjunghjendu un icona di nasconde persunalizata da Bootstrap Icons , è utilizendu qualchi utilità di flexbox per aghjustà u layout.

html 
<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, pudete ancu aghjunghje cuntrolli è cumpunenti supplementari à i brindisi.

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

Schemi di culori

Basendu nantu à l'esempiu di sopra, pudete creà diversi schemi di culore di toast cù i nostri utilità di culore è di fondu . Quì avemu aghjustatu .text-bg-primaryà u .toast, è dopu aghjustatu .btn-close-whiteà u nostru buttone vicinu. Per un bordu croccante, eliminemu u cunfini predeterminatu cù .border-0.

html 
<div class="toast align-items-center text-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>

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.

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

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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>

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

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

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), piuttostu cà solu 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.

Siccomu u cuntenutu chì mostrate cambia, assicuratevi di aghjurnà u delaytimeout per chì l'utilizatori anu abbastanza tempu per leghje u 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>

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

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

Mentre tecnicamente hè pussibule aghjunghje cuntrolli focusable / accionabili (cum'è buttoni supplementari o ligami) in u vostru brindisi, avete da evità di fà questu per i brindisi autohiding. Ancu s'ellu dà u brindisi assai delaytempu , l'utilizatori di u teclatu è di a tecnulugia di assistenza ponu truvà difficiuli di ghjunghje à u brindisi à tempu per piglià l'azzione (perchè i brindisi ùn ricevenu micca focus quandu sò affissati). Se avete bisognu di più cuntrolli, ricumandemu d'utilizà un brindisi cù autohide: false.

CSS

Variabili

Aggiuntu in v5.2.0

Comu parte di l'avvicinamentu di e variabili CSS in evoluzione di Bootstrap, i brindisi ora usanu variabili CSS lucali .toastper una persunalizazione mejorata in tempu reale. I valori per e variabili CSS sò stabiliti via Sass, cusì a persunalizazione di Sass hè ancu supportata.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Variabili Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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);

Usu

Inizializza i brindisi via JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Triggers

A dimissione pò esse ottenuta cù l' dataattributu nantu à un buttone in u brindisi cum'è dimustratu quì sottu:

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

o nantu à un buttone fora di u brindisi cù u data-bs-targetcum'è dimustratu quì sottu:

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

Opzioni

Siccomu l'opzioni ponu esse passati via attributi di dati o JavaScript, pudete appiccicà un nome d'opzione à data-bs-, cum'è in data-bs-animation="{value}". Assicuratevi di cambià u tipu di casu di u nome di l'opzione da " camelCase " à " kebab-case " quandu passanu l'opzioni via attributi di dati. Per esempiu, aduprà data-bs-custom-class="beautifier"invece di data-bs-customClass="beautifier".

A partire da Bootstrap 5.2.0, tutti i cumpunenti supportanu un attributu di dati riservatu sperimentaledata-bs-config chì pò accoglie una cunfigurazione di cumpunenti simplice cum'è una stringa JSON. Quandu un elementu hà data-bs-config='{"delay":0, "title":123}'è data-bs-title="456"attributi, u valore finali titleserà 456è l'attributi di dati separati anu da annullà i valori dati nantu à data-bs-config. Inoltre, l'attributi di dati esistenti sò capaci di allughjà valori JSON cum'è data-bs-delay='{"show":0,"hide":150}'.

Nome Tipu Default Descrizzione
animation booleanu true Applica una transizione di fade CSS à u brindisi.
autohide booleanu true Oculta automaticamente u brindisi dopu u ritardu.
delay numeru 5000 Ritarda in millisecondi prima di ammuccià u brindisi.

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 .

Metudu Descrizzione
dispose Nasconde u brindisi di un elementu. U vostru brindisi fermarà nantu à u DOM ma ùn si mostra più.
getInstance Metudu staticu chì vi permette di ottene l'istanza di brindisi assuciata à un elementu DOM.
Per esempiu: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Ritorna una istanza di toast Bootstrap.
getOrCreateInstance Metudu staticu chì permette di ottene l'istanza di brindisi assuciata à un elementu DOM, o creà un novu, in casu ùn hè micca inizializatu.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Ritorna un'istanza di toast Bootstrap.
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.
isShown Ritorna un boolean secondu u statu di visibilità di 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.

Avvenimenti

Avvenimentu Descrizzione
hide.bs.toast Questu avvenimentu hè sparatu immediatamente quandu u hidemetudu di istanza hè statu chjamatu.
hidden.bs.toast Questu avvenimentu hè sparatu quandu u brindisi hà finitu di esse oculatu da l'utilizatore.
show.bs.toast Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
shown.bs.toast Questu avvenimentu hè sparatu quandu u brindisi hè statu resu visibile à l'utilizatore. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})