in English

Torrades

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

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:

  • Si esteu creant el nostre JavaScript des de la font, requereixutil.js .
  • Les torrades estan activades per motius de rendiment, de manera que les heu d'inicialitzar vosaltres mateixos .
  • Tingues en compte que ets responsable de col·locar els brindis.
  • 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.

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

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

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Translúcid

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

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

Apilament

Quan tens diversos brindis, per defecte les apilem verticalment de manera llegible.

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

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.

Bootstrap Fa 11 minuts
Hola món! Aquest és un missatge de brindis. 
<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 als sistemes que generen més notificacions, penseu a utilitzar un element d'embolcall perquè es puguin apilar fàcilment.

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

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

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

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 la injecció/actualització d'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 s'anunciï sempre 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 prou temps per llegir el brindis.

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

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

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

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

Comportament de JavaScript

Ús

Inicialitzar torrades mitjançant JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-animation="".

Nom Tipus Per defecte Descripció
animació booleà veritat Apliqueu una transició d'esvaïment CSS al brindis
ocultar automàticament booleà veritat Amaga automàticament el brindis
retard nombre 500 Retard per amagar el brindis (ms)

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

$().toast(options)

Adjunta un controlador de brindis a una col·lecció d'elements.

.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.toastque es produeixi l'esdeveniment). Heu de trucar manualment a aquest mètode, en canvi, el vostre brindis no es mostrarà.

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

.toast('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.toastque es produeixi l'esdeveniment). Heu de trucar manualment a aquest mètode si heu fet autohidea false.

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

.toast('dispose')

Amaga el brindis d'un element. El vostre brindis romandrà al DOM però ja no es mostrarà.

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

Esdeveniments

Tipus d'esdeveniment Descripció
mostrar.bs.torrada Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
mostrat.bs.torrada Aquest esdeveniment s'activa quan el brindis s'ha fet visible per a l'usuari.
amagar.bs.torrada Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode d'instància.
ocult.bs.torrada Aquest esdeveniment s'activa quan el brindis s'ha acabat d'ocultar a l'usuari. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})