Toasts

Push Notifikatiounen un Är Besucher mat engem Toast, e liicht a liicht personaliséierbare Alarmmeldung.

Op dëser Säit

Toasts si liicht Notifikatiounen entwéckelt fir d'Push Notifikatiounen ze mimikéieren, déi vu mobilen an Desktop Betribssystemer populariséiert goufen. Si gi mat Flexbox gebaut, sou datt se einfach ausriichten a positionéieren.

Iwwersiicht

Saachen ze wëssen wann Dir den Toast Plugin benotzt:

Toasts sinn opt-in aus Leeschtungsgrënn, also musst Dir se selwer initialiséieren .
Toast verstoppt sech automatesch wann Dir net spezifizéiert autohide: false.

Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro of. Kuckt d' Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .

Beispiller

Basis

Ze encouragéieren extensible an prévisibel Toasts, Mir recommandéieren engem Header a Kierper. Toast Header benotzen display: flex, erlaabt eng einfach Ausrichtung vum Inhalt dank eise Margin a Flexbox Utilities.

Toasts si sou flexibel wéi Dir braucht an hu ganz wéineg erfuerderlech Markup. Op d'mannst verlaange mir en eenzegt Element fir Ären "getoasten" Inhalt ze enthalen an en Entlooss Knäppchen staark ze encouragéieren.

Moien Welt! Dëst ass en Toast Message.

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>

Virdrun hunn eis Scripte dynamesch d' .hideKlass bäigefüügt fir en Toast komplett ze verstoppen (mat display:none, anstatt just mat opacity:0). Dat ass elo net méi néideg. Wéi och ëmmer, fir Réckkompatibilitéit, wäert eise Skript weiderhin d'Klass wiesselen (och wann et kee praktesche Bedierfnes dofir ass) bis déi nächst grouss Versioun.

Live Beispill

Klickt op de Knäppchen hei ënnen fir en Toast ze weisen (mat eisen Utilities an der ënneschter rechter Ecke positionéiert) deen als Standard verstoppt ass.

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>

Mir benotze folgend JavaScript fir eis Live Toast Demo auszeléisen:

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

    toast.show()
  })
}

Duerchsichteg

Toasts si liicht transluzent fir ze vermëschen mat deem wat ënnert hinnen ass.

Moien Welt! Dëst ass en Toast Message.

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>

Stacking

Dir kënnt Toasten stackelen andeems Dir se an engem Toastbehälter wéckelt, wat vertikal e bëssen Abstand addéiere wäert.

Gesinn? Just esou.

Kapp erop, Toast gëtt automatesch gestapelt

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>

Benotzerdefinéiert Inhalt

Personnaliséiert Är Toasts andeems Dir Ënnerkomponenten ewechhuelt, se mat Utilities tweaking oder andeems Dir Ären eegene Markup bäidréit. Hei hu mir e méi einfache Toast erstallt andeems Dir d'Standard ewechhuelt .toast-header, e personaliséierte Hide Icon vu Bootstrap Icons bäigefüügt an e puer Flexbox Utilities benotzt fir de Layout unzepassen.

Moien Welt! Dëst ass en Toast Message.

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>

Alternativ kënnt Dir och zousätzlech Kontrollen a Komponenten op Toasten addéieren.

Moien Welt! Dëst ass en Toast Message.

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>

Faarf Schemaen

Op dem uewe genannte Beispill bauen, kënnt Dir verschidde Toast Faarfschemae mat eise Faarf- an Hannergrond Utilities erstellen. Hei hu mir derzou bäigefüügt .text-bg-primary, .toastan dann .btn-close-whiteop eise Zoumaache Knäppchen bäigefüügt. Fir e knusprech Rand ewechhuelen mir d'Standardgrenz mat .border-0.

Moien Welt! Dëst ass en Toast Message.

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>

Placement

Plaz Toast mat personaliséierte CSS wéi Dir se braucht. Uewe riets gëtt dacks fir Notifikatiounen benotzt, sou wéi déi iewescht Mëtt. Wann Dir nëmmen een Toast gläichzäiteg wäert weisen, setzt d'Positionéierungsstiler direkt op der .toast.

Moien Welt! Dëst ass en Toast Message.

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>

Fir Systemer déi méi Notifikatiounen generéieren, betruecht e Wrapping-Element ze benotzen fir datt se einfach kënne stackelen.

Gesinn? Just esou.

Kapp erop, Toast gëtt automatesch gestapelt

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>

Dir kënnt och lëschteg sinn mat Flexbox Utilities fir Toasts horizontal an / oder vertikal ze alignéieren.

Moien Welt! Dëst ass en Toast Message.

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>

Accessibilitéit

Toasts si geduecht fir kleng Ënnerbriechungen fir Är Besucher oder Benotzer ze sinn, also fir déi mat Écran Lieser an ähnlechen Assistenztechnologien ze hëllefen, sollt Dir Är Toasts an enger aria-liveRegioun wéckelen . Ännerunge fir lieweg Regiounen (wéi d'Injektioun / d'Aktualiséierung vun engem Toastkomponent) ginn automatesch vun den Écran Lieser ugekënnegt ouni de Benotzer säi Fokus ze beweegen oder de Benotzer soss z'ënnerbriechen. Zousätzlech, abegraff aria-atomic="true"fir sécherzestellen datt de ganzen Toast ëmmer als eenzeg (atomar) Eenheet ugekënnegt gëtt, anstatt just ze verkënnegen wat geännert gouf (wat zu Probleemer kéint féieren wann Dir nëmmen en Deel vum Inhalt vum Toast aktualiséiert, oder wann Dir deeselwechten Toast Inhalt weist zu engem spéideren Zäitpunkt). Wann déi néideg Informatioun wichteg ass fir de Prozess, zB fir eng Lëscht vu Feeler an enger Form, da benotzt d' Alarmkomponentamplaz Toast.

Bedenkt datt d'Live Regioun am Markup muss präsent sinn ier den Toast generéiert oder aktualiséiert gëtt. Wann Dir béid gläichzäiteg dynamesch generéiert an se op d'Säit sprëtzen, ginn se normalerweis net vun Hëllefstechnologien ugekënnegt.

Dir musst och den rolean aria-liveNiveau upassen ofhängeg vum Inhalt. Wann et e wichtege Message wéi e Feeler ass, benotzt role="alert" aria-live="assertive", soss benotzt role="status" aria-live="polite"Attributer.

Wéi den Inhalt deen Dir weist ännert, gitt sécher den delayTimeout ze aktualiséieren sou datt d'Benotzer genuch Zäit hunn fir den Toast ze liesen.

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

Wann Dir benotzt autohide: false, musst Dir en Zoumaache Knäppchen derbäi fir datt d'Benotzer den Toast entloossen.

Moien Welt! Dëst ass en Toast Message.

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>

Wärend technesch et méiglech ass fokusséierbar / handhabbar Kontrollen (wéi zousätzlech Knäppercher oder Linken) an Ärem Toast ze addéieren, sollt Dir dëst vermeiden fir Autoverstoppen Toasts ze maachen. Och wann Dir den Toast e laangen delayTimeout gitt , kënnen d'Benotzer vun der Tastatur an Hëllefstechnologie et schwéier fannen den Toast an der Zäit z'erreechen fir Handlung ze huelen (well Toasten net fokusséieren wann se ugewise ginn). Wann Dir onbedéngt weider Kontrollen muss hunn, recommandéiere mir en Toast mat ze benotzen autohide: false.

CSS

Variablen

Dobäi an v5.2.0

Als Deel vum Bootstrap's evoluéierende CSS Variabel Approche benotzen Toasts elo lokal CSS Variablen op .toastfir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

  --#{$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 Variablen

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

Benotzung

Initialiséiere Toasts iwwer JavaScript:

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

Ausléiser

Entloossung kann erreecht ginn mat dem dataAttribut op engem Knäppchen am Toast wéi hei ënnen demonstréiert:

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

oder op engem Knäppchen ausserhalb vum Toast benotzt de data-bs-targetwéi hei ënnen gewisen:

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

Optiounen

Wéi Optiounen kënnen iwwer Dateattributer oder JavaScript weidergeleet ginn, kënnt Dir en Optiounsnumm op data-bs-, wéi an data-bs-animation="{value}". Vergewëssert Iech de Falltyp vum Optiounsnumm vun " camelCase " op " Kebab-Case " z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill benotzt data-bs-custom-class="beautifier"amplaz data-bs-customClass="beautifier".

Zënter Bootstrap 5.2.0 ënnerstëtzen all Komponenten en experimentellen reservéierten Dateattribut, data-bs-configdeen eng einfach Komponentkonfiguratioun als JSON-String kann ënnerhuelen. Wann en Element data-bs-config='{"delay":0, "title":123}'an data-bs-title="456"Attributer huet, gëtt de Finale titleWäert 456an déi getrennten Dateattributter iwwerschreiden Wäerter, déi op data-bs-config. Zousätzlech kënnen existent Datenattributer JSON Wäerter wéi data-bs-delay='{"show":0,"hide":150}'.

Numm	Typ	Default	Beschreiwung
`animation`	boolesch	`true`	Fëllt e CSS Fade Iwwergang op den Toast.
`autohide`	boolesch	`true`	Verstoppt den Toast automatesch no der Verzögerung.
`delay`	Zuel	`5000`	Verspéidung a Millisekonnen ier Dir den Toast verstoppt.

Methoden

Asynchron Methoden an Iwwergäng

All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

Method	Beschreiwung
`dispose`	Verstoppt en Element Toast. Ären Toast bleift op der DOM awer wäert net méi weisen.
`getInstance`	Statesch Method déi Iech erlaabt d'Toast Instanz mat engem DOM Element assoziéiert ze kréien. Zum Beispill: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Gitt eng Bootstrap Toast Instanz zréck.
`getOrCreateInstance`	Statesch Method déi Iech erlaabt d'Toast-Instanz mat engem DOM-Element assoziéiert ze kréien, oder en neien erstellen, am Fall wou se net initialiséiert gouf. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Gitt eng Bootstrap Toast Instanz zréck.
`hide`	Verstoppt en Element Toast. Zréck op den Uruffer ier den Toast tatsächlech verstoppt ass (dh ier d' `hidden.bs.toast`Evenement geschitt ass). Dir musst dës Method manuell ruffen wann Dir gemaach `autohide`hutt `false`.
`isShown`	Gëtt e Boolean no dem Visibilitéitszoustand vun Toast zréck.
`show`	Entdeckt en Element Toast. Zréck op den Uruffer ier den Toast tatsächlech gewisen gouf (dh ier d' `shown.bs.toast`Evenement geschitt ass). Dir musst dës Method manuell ruffen, amplaz wäert Ären Toast net weisen.

Evenementer

Event	Beschreiwung
`hide.bs.toast`	Dëst Evenement gëtt direkt gebrannt wann d' `hide`Instanzmethod genannt gouf.
`hidden.bs.toast`	Dëst Evenement gëtt ofgeléist wann den Toast fäerdeg ass vum Benotzer verstoppt ze ginn.
`show.bs.toast`	Dëst Event brennt direkt wann d' `show`Instanzmethod genannt gëtt.
`shown.bs.toast`	Dëst Evenement gëtt gebrannt wann den Toast fir de Benotzer siichtbar gemaach gouf.

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