Source

Toast

Push notificaties 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.

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

Doorzichtig

Toasts zijn ook enigszins doorschijnend, dus ze mengen zich met alles waar ze op lijken. Voor browsers die de backdrop-filterCSS-eigenschap ondersteunen, zullen we ook proberen de elementen onder een toast te vervagen.

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

<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 tegelijk wilt laten zien, plaats dan de positioneringsstijlen op de .toast.

Bootstrap 11 minuten geleden
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.

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

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-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 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 om ervoor te zorgen dat mensen 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.

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

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 showinstantiemethode 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 hideinstantiemethode 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...
})