Torrades

Envieu les notificacions als vostres visitants amb un brindis, un missatge d'alerta lleuger i fàcilment personalitzable.

En aquesta pàgina

Les torrades són notificacions lleugeres dissenyades per imitar les notificacions push que han estat popularitzades pels sistemes operatius mòbils i d'escriptori. Estan construïts amb flexbox, de manera que són fàcils d'alinear i col·locar.

Visió general

Coses a saber quan s'utilitza el connector toast:

Les torrades estan activades per motius de rendiment, de manera que les heu d'inicialitzar vosaltres mateixos .
Les torrades s'amagaran automàticament si no ho especifiqueu autohide: false.

L'efecte d'animació d'aquest component depèn de la prefers-reduced-motionconsulta de mitjans. Consulteu la secció de moviment reduït de la nostra documentació d'accessibilitat .

Exemples

Bàsic

Per fomentar les torrades extensibles i previsibles, recomanem una capçalera i un cos. Les capçaleres de toast utilitzen display: flex, que permeten una fàcil alineació del contingut gràcies a les nostres utilitats de marge i flexbox.

Les torrades són tan flexibles com necessiteu i tenen molt poc marcatge necessari. Com a mínim, necessitem un únic element per contenir el vostre contingut "torrat" i recomanem fermament un botó de descartar.

Hola món! Aquest és un missatge de brindis.

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>

Anteriorment, els nostres scripts van afegir dinàmicament la .hideclasse per ocultar completament un brindis (amb display:none, en lloc de només amb opacity:0). Això ja no és necessari. Tanmateix, per a la compatibilitat enrere, el nostre script continuarà alternant la classe (tot i que no hi ha necessitat pràctica) fins a la següent versió principal.

Exemple en viu

Feu clic al botó següent per mostrar un brindis (ubicat amb les nostres utilitats a la cantonada inferior dreta) que s'ha amagat per defecte.

Hello, world! This is a toast message.

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

Utilitzem el següent JavaScript per activar la nostra demostració de brindis en directe:

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

    toast.show()
  })
}

Translúcid

Les torrades són lleugerament translúcides per combinar-se amb el que hi ha a sota.

Hola món! Aquest és un missatge de brindis.

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>

Apilament

Podeu apilar torrades embolicant-les en un recipient de torrat, que afegirà una mica d'espai verticalment.

Ho veus? Així.

Atenció, les torrades s'apilaran automàticament

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>

Contingut personalitzat

Personalitzeu els vostres brindis eliminant subcomponents, ajustant-los amb utilitats o afegint el vostre propi marcatge. Aquí hem creat un brindis més senzill eliminant el valor predeterminat .toast-header, afegint una icona d'amaga personalitzada a les icones d' arrencada i utilitzant algunes utilitats de flexbox per ajustar el disseny.

Hola món! Aquest és un missatge de brindis.

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>

Alternativament, també podeu afegir controls i components addicionals a les torrades.

Hola món! Aquest és un missatge de brindis.

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>

Esquemes de colors

A partir de l'exemple anterior, podeu crear diferents esquemes de colors torrats amb les nostres utilitats de color i fons . Aquí hem afegit .text-bg-primaryal botó .toast, i després .btn-close-whiteal nostre botó de tancament. Per obtenir una vora nítida, eliminem la vora predeterminada amb .border-0.

Hola món! Aquest és un missatge de brindis.

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>

Col·locació

Col·loqueu torrades amb CSS personalitzats segons les necessiteu. La part superior dreta s'utilitza sovint per a les notificacions, igual que la part superior central. Si només mostrareu un brindis a la vegada, poseu els estils de posicionament directament a .toast.

Hola món! Aquest és un missatge de brindis.

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 als sistemes que generen més notificacions, penseu a utilitzar un element d'embolcall perquè es puguin apilar fàcilment.

Ho veus? Així.

Atenció, les torrades s'apilaran automàticament

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>

També us podeu agradar amb les utilitats flexbox per alinear les torrades horitzontalment i/o verticalment.

Hola món! Aquest és un missatge de brindis.

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>

Accessibilitat

Les torrades estan pensades per ser petites interrupcions per als vostres visitants o usuaris, de manera que per ajudar aquells amb lectors de pantalla i tecnologies d'assistència similars, hauríeu d'embolicar els vostres brindis en una aria-liveregió . Els lectors de pantalla anuncien automàticament els canvis a les regions en directe (com ara injectar/actualitzar un component de brindis) sense necessitat de moure el focus de l'usuari o interrompre l'usuari d'una altra manera. A més, inclou aria-atomic="true"per assegurar-se que tot el brindis sempre s'anunciï com una unitat (atòmica) única, en lloc d'anunciar el que s'ha canviat (cosa que podria provocar problemes si només actualitzes part del contingut del brindis o si es mostra el mateix contingut del brindis). en un moment posterior). Si la informació necessària és important per al procés, per exemple per a una llista d'errors en un formulari, feu servir el component d'alertaen lloc de pa torrat.

Tingueu en compte que la regió en directe ha d'estar present al marcatge abans de generar o actualitzar el brindis. Si genereu tots dos de manera dinàmica al mateix temps i els injecteu a la pàgina, generalment no seran anunciats per les tecnologies d'assistència.

També cal adaptar el nivell rolei aria-liveen funció del contingut. Si es tracta d'un missatge important com un error, utilitzeu role="alert" aria-live="assertive", en cas contrari, utilitzeu role="status" aria-live="polite"atributs.

A mesura que canvia el contingut que esteu mostrant, assegureu-vos d'actualitzar el temps d' delayespera perquè els usuaris tinguin temps suficient per llegir el brindis.

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

Quan utilitzeu autohide: false, heu d'afegir un botó de tancament per permetre als usuaris descartar el brindis.

Hola món! Aquest és un missatge de brindis.

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>

Tot i que tècnicament és possible afegir controls enfocables/accionables (com ara botons o enllaços addicionals) al vostre brindis, hauríeu d'evitar fer-ho per amagar els brindis automàticament. Fins i tot si doneu al brindis un temps d' delayespera llarg , els usuaris de teclat i tecnologia d'assistència poden tenir dificultats per arribar al brindis a temps per actuar (ja que els brindis no reben el focus quan es mostren). Si heu de tenir més controls, us recomanem que feu servir un brindis amb autohide: false.

CSS

Les variables

Afegit a la v5.2.0

Com a part de l'evolució de l'enfocament de les variables CSS de Bootstrap, ara les torrades utilitzen variables CSS locals .toastper a una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

  --#{$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};

Variables 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);

Ús

Inicialitzar torrades mitjançant JavaScript:

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

Disparadors

L'acomiadament es pot aconseguir amb l' dataatribut d'un botó dins del brindis , tal com es mostra a continuació:

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

o en un botó a l'exterior de la torrada utilitzant el data-bs-targetque es mostra a continuació:

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

Opcions

Com que les opcions es poden passar mitjançant atributs de dades o JavaScript, podeu afegir un nom d'opció a data-bs-, com a data-bs-animation="{value}". Assegureu-vos de canviar el tipus de cas del nom de l'opció de " camelCase " a " kebab-case " quan passeu les opcions mitjançant atributs de dades. Per exemple, utilitzeu data-bs-custom-class="beautifier"en comptes de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, tots els components admeten un atribut de dades reservades experimentalsdata-bs-config que pot albergar una configuració senzilla de components com a cadena JSON. Quan un element té data-bs-config='{"delay":0, "title":123}'i data-bs-title="456"atributs, el titlevalor final serà 456i els atributs de dades independents substituiran els valors donats a data-bs-config. A més, els atributs de dades existents poden albergar valors JSON com data-bs-delay='{"show":0,"hide":150}'.

Nom	Tipus	Per defecte	Descripció
`animation`	booleà	`true`	Apliqueu una transició d'esvaïment CSS al brindis.
`autohide`	booleà	`true`	Amaga automàticament el brindis després del retard.
`delay`	nombre	`5000`	Retard en mil·lisegons abans d'amagar el brindis.

Mètodes

Mètodes asíncrons i transicions

Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .

Consulteu la nostra documentació de JavaScript per obtenir més informació .

Mètode	Descripció
`dispose`	Amaga el brindis d'un element. El vostre brindis romandrà al DOM però ja no es mostrarà.
`getInstance`	Mètode estàtic que us permet obtenir la instància toast associada a un element DOM. Per exemple: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`retorna una instància de brindis Bootstrap.
`getOrCreateInstance`	Mètode estàtic que us permet obtenir la instància toast associada a un element DOM, o crear-ne una de nova, en cas que no s'hagi inicialitzat. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Retorna una instància de brindis Bootstrap.
`hide`	Amaga el brindis d'un element. Torna a la persona que truca abans que el brindis s'hagi amagat (és a dir, abans `hidden.bs.toast`que es produeixi l'esdeveniment). Heu de trucar manualment a aquest mètode si heu fet `autohide`a `false`.
`isShown`	Retorna un booleà segons l'estat de visibilitat de toast.
`show`	Revela el brindis d'un element. Torna a la persona que truca abans que s'hagi mostrat realment el brindis (és a dir, abans `shown.bs.toast`que es produeixi l'esdeveniment). Heu de trucar manualment a aquest mètode, en canvi, el vostre brindis no es mostrarà.

Esdeveniments

Esdeveniment	Descripció
`hide.bs.toast`	Aquest esdeveniment s'activa immediatament quan `hide`s'ha cridat el mètode d'instància.
`hidden.bs.toast`	Aquest esdeveniment s'activa quan el brindis s'ha acabat d'ocultar a l'usuari.
`show.bs.toast`	Aquest esdeveniment s'activa immediatament quan `show`es crida al mètode d'instància.
`shown.bs.toast`	Aquest esdeveniment s'activa quan el brindis s'ha fet visible per a l'usuari.

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