Toast

Pushmeldingen naar uw bezoekers met een toost, een lichtgewicht en gemakkelijk aanpasbaar waarschuwingsbericht.

Toasts zijn lichtgewicht meldingen die zijn ontworpen om de pushmeldingen na te bootsen die populair zijn geworden door mobiele en desktopbesturingssystemen. Ze zijn gebouwd met flexbox, dus ze zijn gemakkelijk uit te lijnen en te positioneren.

Overzicht

Dingen om te weten bij het gebruik van de toast-plug-in:

Als u ons JavaScript vanaf de bron bouwt, isutil.js .
Toasts zijn opt-in om prestatieredenen, dus je moet ze zelf initialiseren .
Houd er rekening mee dat u verantwoordelijk bent voor het plaatsen van toast.
Toasts worden automatisch verborgen als u dit niet opgeeft autohide: false.

Het animatie-effect van deze component is afhankelijk van de prefers-reduced-motionmediaquery. Zie het gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .

Voorbeelden

Basis

Om uitbreidbare en voorspelbare toasts aan te moedigen, raden we een header en body aan. Toast-headers gebruiken display: flex, waardoor inhoud gemakkelijk kan worden uitgelijnd dankzij onze marge- en flexbox-hulpprogramma's.

Toasts zijn zo flexibel als je nodig hebt en hebben heel weinig vereiste opmaak. We hebben minimaal een enkel element nodig om uw "geroosterde" inhoud te bevatten en raden een afwijzingsknop ten zeerste aan.

Hallo Wereld! Dit is een toostbericht.

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

Live

Klik op de onderstaande knop om een toost weer te geven (gepositioneerd met onze hulpprogramma's in de rechterbenedenhoek) die standaard is verborgen met .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>

Doorzichtig

Toast is enigszins doorschijnend om op te gaan in wat eronder zit.

Hallo Wereld! Dit is een toostbericht.

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

Stapelen

Als je meerdere toasts hebt, stapelen we ze standaard verticaal op een leesbare manier.

Zien? Net als dit.

Let op, toast wordt automatisch gestapeld

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

Plaatsing

Plaats toasts met aangepaste CSS als je ze nodig hebt. De rechterbovenhoek wordt vaak gebruikt voor meldingen, net als de middelste. Als je maar één toast per keer wilt laten zien, plaats dan de positioneringsstijlen precies op de .toast.

Hallo Wereld! Dit is een toostbericht.

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

Voor systemen die meer meldingen genereren, kunt u overwegen een verpakkingselement te gebruiken, zodat ze gemakkelijk kunnen worden gestapeld.

Zien? Net als dit.

Let op, toast wordt automatisch gestapeld

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

U kunt ook aan de slag met flexbox-hulpprogramma's om toast horizontaal en/of verticaal uit te lijnen.

Hallo Wereld! Dit is een toostbericht.

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

Toegankelijkheid

Toasts zijn bedoeld als kleine onderbrekingen voor uw bezoekers of gebruikers, dus om degenen met schermlezers en soortgelijke ondersteunende technologieën te helpen, moet u uw toasts in een aria-liveregio inpakken . Wijzigingen in live-regio's (zoals het injecteren/updaten van een toastcomponent) worden automatisch aangekondigd door schermlezers zonder dat de focus van de gebruiker hoeft te worden verplaatst of de gebruiker op een andere manier hoeft te worden onderbroken. Voeg er ook aria-atomic="true"aan toe om ervoor te zorgen dat de hele toast altijd wordt aangekondigd als een enkele (atomaire) eenheid, in plaats van alleen aan te kondigen wat er is gewijzigd (wat tot problemen kan leiden als u slechts een deel van de inhoud van de toast bijwerkt of als dezelfde toastinhoud wordt weergegeven op een later tijdstip). Als de benodigde informatie belangrijk is voor het proces, bijvoorbeeld voor een lijst met fouten in een formulier, gebruik dan de waarschuwingscomponentin plaats van toast.

Houd er rekening mee dat de live-regio aanwezig moet zijn in de opmaak voordat de toast wordt gegenereerd of bijgewerkt. Als u beide tegelijkertijd dynamisch genereert en in de pagina injecteert, worden ze over het algemeen niet aangekondigd door ondersteunende technologieën.

Afhankelijk van de inhoud moet je ook het niveau roleen aanpassen. aria-liveAls het een belangrijk bericht is, zoals een fout, gebruik dan role="alert" aria-live="assertive", gebruik anders role="status" aria-live="polite"attributen.

Als de inhoud die u weergeeft verandert, moet u de delaytime -out bijwerken , zodat gebruikers genoeg tijd hebben om de toast te lezen.

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

Wanneer u gebruikt autohide: false, moet u een sluitknop toevoegen zodat gebruikers de toast kunnen sluiten.

Hallo Wereld! Dit is een toostbericht.

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

Hoewel het technisch mogelijk is om focusbare/actiegerichte bedieningselementen (zoals extra knoppen of links) aan je toast toe te voegen, moet je dit vermijden voor het automatisch verbergen van toasts. Zelfs als u de toast een lange delaytime -out geeft, kunnen gebruikers van toetsenborden en ondersteunende technologie het moeilijk vinden om de toast op tijd te bereiken om actie te ondernemen (aangezien toasts niet scherp worden gesteld wanneer ze worden weergegeven). Als je absoluut meer controle nodig hebt, raden we aan om een toast te gebruiken met autohide: false.

JavaScript-gedrag

Gebruik

Initialiseer toasts via JavaScript:

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

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-animation="".

Naam	Type	Standaard	Beschrijving
animatie	booleaans	WAAR	Pas een CSS-vervagingsovergang toe op de toast
automatisch verbergen	booleaans	WAAR	De toast automatisch verbergen
vertraging	nummer	`500`	Vertraging met het verbergen van de toast (ms)

Methoden:

Asynchrone methoden en overgangen

Alle API-methoden zijn asynchroon en starten een transitie . Ze keren terug naar de beller zodra de overgang is gestart maar voordat deze eindigt . Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .

Zie onze JavaScript-documentatie voor meer informatie .

`$().toast(options)`

Bevestigt een toast-handler aan een elementenverzameling.

`.toast('show')`

Onthult de toast van een element. Keert terug naar de beller voordat de toast daadwerkelijk is getoond (dwz voordat de shown.bs.toastgebeurtenis plaatsvindt). Je moet deze methode handmatig aanroepen, in plaats daarvan wordt je toast niet weergegeven.

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

`.toast('hide')`

Verbergt de toast van een element. Keert terug naar de beller voordat de toast daadwerkelijk is verborgen (dwz voordat de hidden.bs.toastgebeurtenis plaatsvindt). U moet deze methode handmatig aanroepen als autohideu false.

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

`.toast('dispose')`

Verbergt de toast van een element. Je toast blijft op de DOM maar wordt niet meer getoond.

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

Evenementen

Evenementtype	Beschrijving
toon.bs.toast	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de `show`instantiemethode wordt aangeroepen.
getoond.bs.toast	Deze gebeurtenis wordt geactiveerd wanneer de toast zichtbaar is gemaakt voor de gebruiker.
verberg.bs.toast	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de `hide`instantiemethode is aangeroepen.
verborgen.bs.toast	Deze gebeurtenis wordt geactiveerd wanneer de toast is verborgen voor de gebruiker.

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