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 raden een afwijzingsknop ten zeerste aan.

Hallo Wereld! Dit is een toostbericht.

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>

Voorheen hebben onze scripts de .hideklasse dynamisch toegevoegd om een toast volledig te verbergen (met display:none, in plaats van alleen met opacity:0). Dit is nu niet meer nodig. Voor achterwaartse compatibiliteit zal ons script de klasse echter blijven omschakelen (ook al is er geen praktische noodzaak voor) tot de volgende hoofdversie.

Live voorbeeld

Klik op de onderstaande knop om een toost weer te geven (gepositioneerd met onze hulpprogramma's in de rechter benedenhoek) die standaard verborgen is.

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>

We gebruiken het volgende JavaScript om onze live toast-demo te activeren:

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

    toast.show()
  })
}

Doorzichtig

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

Hallo Wereld! Dit is een toostbericht.

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>

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

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>

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.

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>

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

Hallo Wereld! Dit is een toostbericht.

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>

Kleurenschema's

Voortbouwend op het bovenstaande voorbeeld, kunt u verschillende toastkleurenschema's maken met onze kleur- en achtergrondhulpprogramma 's. Hier hebben we toegevoegd .text-bg-primaryaan 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.

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>

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.

Hallo Wereld! Dit is een toostbericht.

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>

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

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>

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.

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>

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.

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>

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.

CSS

Variabelen

Toegevoegd in v5.2.0

Als onderdeel van Bootstrap's evoluerende benadering van CSS-variabelen, gebruiken toasts nu lokale CSS .toast-variabelen voor verbeterde realtime aanpassingen. Waarden voor de CSS-variabelen worden ingesteld via Sass, dus Sass-aanpassing wordt ook nog steeds ondersteund.

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

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:                $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);

Gebruik

Initialiseer toasts via JavaScript:

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

Triggers

Ontslag kan worden bereikt met het datakenmerk op een knop in de toast , zoals hieronder wordt aangetoond:

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

of op een knop buiten de toast met behulp van de data-bs-targetonderstaande afbeelding:

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

Opties

Omdat opties kunnen worden doorgegeven via gegevensattributen of JavaScript, kunt u een optienaam toevoegen aan data-bs-, zoals in data-bs-animation="{value}". Zorg ervoor dat u het kasttype van de optienaam wijzigt van " camelCase " in " kebab-case " wanneer u de opties doorgeeft via gegevensattributen. Gebruik bijvoorbeeld in data-bs-custom-class="beautifier"plaats van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteunen alle componenten een experimenteel gereserveerd gegevenskenmerk data-bs-configdat een eenvoudige componentconfiguratie als een JSON-tekenreeks kan bevatten. Wanneer een element attributen heeft data-bs-config='{"delay":0, "title":123}', zal data-bs-title="456"de uiteindelijke titlewaarde zijn 456en zullen de afzonderlijke gegevensattributen de waarden overschrijven die op data-bs-config. Bovendien kunnen bestaande gegevensattributen JSON-waarden zoals data-bs-delay='{"show":0,"hide":150}'.

Naam	Type	Standaard	Beschrijving
`animation`	booleaans	`true`	Pas een CSS-vervagingsovergang toe op de toast.
`autohide`	booleaans	`true`	Verberg de toast automatisch na de vertraging.
`delay`	nummer	`5000`	Vertraging in milliseconden voordat je de toast verbergt.

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 .

Methode	Beschrijving
`dispose`	Verbergt de toast van een element. Je toast blijft op de DOM maar wordt niet meer getoond.
`getInstance`	Statische methode waarmee u de toast-instantie kunt koppelen aan een DOM-element. Bijvoorbeeld: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Retourneert een Bootstrap-toastinstantie.
`getOrCreateInstance`	Statische methode waarmee u de toast-instantie kunt koppelen aan een DOM-element, of een nieuwe kunt maken voor het geval deze niet is geïnitialiseerd. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Retourneert een Bootstrap-toastinstantie.
`hide`	Verbergt de toast van een element. Keert terug naar de beller voordat de toast daadwerkelijk is verborgen (dwz voordat de `hidden.bs.toast`gebeurtenis plaatsvindt). U moet deze methode handmatig aanroepen als `autohide`u `false`.
`isShown`	Retourneert een boolean volgens de zichtbaarheidsstatus van toast.
`show`	Onthult de toast van een element. Keert terug naar de beller voordat de toast daadwerkelijk is getoond (dwz voordat de `shown.bs.toast`gebeurtenis plaatsvindt). Je moet deze methode handmatig aanroepen, in plaats daarvan wordt je toast niet weergegeven.

Evenementen

Evenement	Beschrijving
`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.
`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.

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