Toast

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

Op deze pagina

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:

Toasts zijn opt-in om prestatieredenen, dus je moet ze zelf initialiseren .
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 moedigen een sluitknop 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 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>

Live

Klik op de onderstaande knop om een toost weer te geven (gepositioneerd met onze hulpprogramma's in de rechter benedenhoek) 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 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

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

Stapelen

Je kunt toasts stapelen door ze in een toastcontainer te wikkelen, die verticaal wat ruimte toevoegt.

Zien? Net als dit.

Let op, toast wordt automatisch gestapeld

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

Aangepaste inhoud

Pas uw toast aan door subcomponenten te verwijderen, ze aan te passen met hulpprogramma's of door uw eigen opmaak toe te voegen. Hier hebben we een eenvoudigere toast gemaakt door de standaard te verwijderen .toast-header, een aangepast verbergpictogram toe te voegen aan Bootstrap-pictogrammen en enkele flexbox-hulpprogramma's te gebruiken om de lay-out aan te passen.

Hallo Wereld! Dit is een toostbericht.

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

Als alternatief kunt u ook extra bedieningselementen en componenten aan toasts toevoegen.

Hallo Wereld! Dit is een toostbericht.

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

Kleurenschema's

Voortbouwend op het bovenstaande voorbeeld, kunt u verschillende toastkleurenschema's maken met onze kleur- en achtergrondhulpprogramma 's. Hier hebben we .bg-primaryen toegevoegd .text-whiteaan de .toast, en vervolgens toegevoegd .btn-close-whiteaan onze knop Sluiten. Voor een scherpe rand verwijderen we de standaardrand met .border-0.

Hallo Wereld! Dit is een toostbericht.

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

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.

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

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" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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>

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

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

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.

Sass

Variabelen

$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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

Gebruik

Initialiseer toasts via JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Opties

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

Naam	Type	Standaard	Beschrijving
`animation`	booleaans	`true`	Pas een CSS-vervagingsovergang toe op de toast
`autohide`	booleaans	`true`	De toast automatisch verbergen
`delay`	nummer	`5000`	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 .

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.

toast.show()

verbergen

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.

toast.hide()

weggooien

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

toast.dispose()

getInstance

Statische methode waarmee u de scrollspy-instantie kunt koppelen aan een DOM-element

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Statische methode waarmee u de scrollspy-instantie kunt koppelen aan een DOM-element, of een nieuwe kunt maken voor het geval deze niet is geïnitialiseerd

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Evenementen

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

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