Source

Toast

Push-Benachrichtigungen an Ihre Besucher mit einem Toast, einer leichten und leicht anpassbaren Warnmeldung.

Toasts sind einfache Benachrichtigungen, die die Push-Benachrichtigungen nachahmen sollen, die von Mobil- und Desktop-Betriebssystemen populär gemacht wurden. Sie sind mit Flexbox gebaut, sodass sie einfach auszurichten und zu positionieren sind.

Überblick

Wissenswertes zur Verwendung des Toast-Plugins:

  • Wenn Sie unser JavaScript aus der Quelle erstellenutil.js , ist .
  • Toasts sind aus Leistungsgründen optional, daher müssen Sie sie selbst initialisieren .
  • Bitte beachten Sie, dass Sie für die Positionierung von Toasts verantwortlich sind.
  • Toasts werden automatisch ausgeblendet, wenn Sie nicht angeben autohide: false.

Der Animationseffekt dieser Komponente ist abhängig von der prefers-reduced-motionMedienanfrage. Weitere Informationen finden Sie im Abschnitt zur reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .

Beispiele

Basic

Um erweiterbare und vorhersehbare Toasts zu fördern, empfehlen wir einen Header und einen Body. Toast-Header verwenden display: flex, was dank unserer Rand- und Flexbox-Dienstprogramme eine einfache Ausrichtung des Inhalts ermöglicht.

Toasts sind so flexibel wie Sie es brauchen und haben nur sehr wenig erforderliches Markup. Wir verlangen mindestens ein einzelnes Element, das Ihren „gerösteten“ Inhalt enthält, und empfehlen dringend eine Schaltfläche zum Schließen.

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

Durchscheinend

Toasts sind auch leicht durchscheinend, sodass sie sich über alles mischen, über dem sie erscheinen mögen. Bei Browsern, die die backdrop-filterCSS-Eigenschaft unterstützen, versuchen wir auch, die Elemente unter einem Toast unkenntlich zu machen.

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

Stapeln

Wenn Sie mehrere Toasts haben, stapeln wir sie standardmäßig vertikal und lesbar.

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

Platzierung

Platzieren Sie Toasts mit benutzerdefiniertem CSS nach Bedarf. Oben rechts wird oft für Benachrichtigungen verwendet, ebenso oben in der Mitte. Wenn Sie immer nur einen Toast auf einmal anzeigen möchten, platzieren Sie die Positionierungsstile direkt auf dem .toast.

Bootstrap Vor 11 Minuten
Hallo Welt! Dies ist eine Toast-Nachricht. 
<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>

Erwägen Sie für Systeme, die mehr Benachrichtigungen generieren, die Verwendung eines Wrapping-Elements, damit sie sich problemlos stapeln lassen.

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

Sie können sich auch mit Flexbox-Dienstprogrammen austoben, um Toasts horizontal und/oder vertikal auszurichten.

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

Barrierefreiheit

Toasts sind als kleine Unterbrechungen für Ihre Besucher oder Benutzer gedacht. Um Benutzern mit Screenreadern und ähnlichen Hilfstechnologien zu helfen, sollten Sie Ihre Toasts in einen aria-liveBereich einschließen . Änderungen an Live-Bereichen (z. B. das Einfügen/Aktualisieren einer Toast-Komponente) werden automatisch von Bildschirmleseprogrammen angekündigt, ohne dass der Fokus des Benutzers verschoben oder der Benutzer anderweitig unterbrochen werden muss. Fügen Sie außerdem hinzu, um aria-atomic="true"sicherzustellen, dass der gesamte Toast immer als einzelne (atomare) Einheit angekündigt wird, anstatt anzukündigen, was geändert wurde (was zu Problemen führen könnte, wenn Sie nur einen Teil des Inhalts des Toasts aktualisieren oder denselben Toast-Inhalt anzeigen unter zu einem späteren Zeitpunkt). Wenn die benötigten Informationen für den Prozess wichtig sind, zB für eine Fehlerliste in einem Formular, dann nutzen Sie die Alert-Komponentestatt Toast.

Beachten Sie, dass die Live-Region im Markup vorhanden sein muss, bevor der Toast generiert oder aktualisiert wird. Wenn Sie beide gleichzeitig dynamisch generieren und in die Seite einfügen, werden sie in der Regel nicht von Hilfstechnologien angekündigt.

Je nach Inhalt müssen Sie auch die roleund Ebene anpassen . aria-liveWenn es sich um eine wichtige Nachricht wie einen Fehler handelt, verwenden Sie role="alert" aria-live="assertive", andernfalls verwenden Sie role="status" aria-live="polite"Attribute.

Wenn sich der angezeigte Inhalt ändert, stellen Sie sicher, dass Sie das delayZeitlimit aktualisieren, um sicherzustellen , dass die Leute genügend Zeit haben, den Toast zu lesen.

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

Wenn Sie verwenden autohide: false, müssen Sie eine Schließen-Schaltfläche hinzufügen, damit Benutzer den Toast verwerfen können.

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

Verwendungszweck

Toasts über JavaScript initialisieren:

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

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-animation="".

Name Typ Standard Beschreibung
Animation boolesch Stimmt Wenden Sie einen CSS-Fade-Übergang auf den Toast an
automatisch ausblenden boolesch Stimmt Toast automatisch ausblenden
Verzögerung Nummer 500 Verzögerung beim Ausblenden des Toasts (ms)

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang . Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet . Außerdem wird ein Methodenaufruf einer Übergangskomponente ignoriert .

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation .

$().toast(options)

Fügt einen Toasthandler an eine Elementsammlung an.

.toast('show')

Zeigt den Toast eines Elements an. Kehrt zum Anrufer zurück, bevor der Toast tatsächlich gezeigt wurde (dh bevor das shown.bs.toastEreignis eintritt). Sie müssen diese Methode manuell aufrufen, stattdessen wird Ihr Toast nicht angezeigt.

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

.toast('hide')

Blendet den Toast eines Elements aus. Kehrt zum Anrufer zurück, bevor der Toast tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.toastEreignis eintritt). Sie müssen diese Methode manuell aufrufen, wenn Sie dies vorgenommen autohidehaben false.

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

.toast('dispose')

Blendet den Toast eines Elements aus. Ihr Toast bleibt auf dem DOM, wird aber nicht mehr angezeigt.

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

Veranstaltungen

Ereignistyp Beschreibung
show.bs.toast Dieses Ereignis wird sofort ausgelöst, wenn die showInstanzmethode aufgerufen wird.
gezeigt.bs.toast Dieses Ereignis wird ausgelöst, wenn der Toast für den Benutzer sichtbar gemacht wurde.
verstecken.bs.toast Dieses Ereignis wird sofort ausgelöst, wenn die hideInstanzmethode aufgerufen wurde.
versteckt.bs.toast Dieses Ereignis wird ausgelöst, wenn der Toast vollständig vor dem Benutzer ausgeblendet wurde. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})