Toasts

Push notifikaasjes nei jo besikers mei in toast, in lichtgewicht en maklik oanpasber warskôgingsberjocht.

Op dizze side

Toasts binne lichtgewicht notifikaasjes ûntworpen om de push-notifikaasjes te mimikjen dy't populêr binne troch mobile en buroblêdbestjoeringssystemen. Se binne boud mei flexbox, sadat se maklik binne te rjochtsjen en te pleatsen.

Oersicht

Dingen om te witten by it brûken fan de toast-plugin:

Toasts binne opt-in foar prestaasjes redenen, dus jo moatte se sels inisjalisearje .
Toasts sille automatysk ferbergje as jo net spesifisearje autohide: false.

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Foarbylden

Basic

Foar in stimulearjen útwreide en foarsisber toasts, Wy riede in koptekst en lichem. Toast-headers brûke display: flex, wêrtroch maklike ôfstimming fan ynhâld mooglik is troch ús marzje- en flexbox-helpprogramma's.

Toasts binne sa fleksibel as jo nedich binne en hawwe heul lyts fereaske markup. Wy fereaskje op syn minst ien elemint om jo "toasted" ynhâld te befetsjen en in ûntslachknop sterk oan te moedigjen.

Hallo wrâld! Dit is in toast berjocht.

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

Earder hawwe ús skripts de .hideklasse dynamysk tafoege om in toast folslein te ferbergjen (mei display:none, yn stee fan allinich mei opacity:0). Dit is no net mear nedich. Foar efterútkompatibiliteit sil ús skript lykwols trochgean mei it wikseljen fan de klasse (ek al is d'r gjin praktyske ferlet fan) oant de folgjende grutte ferzje.

Live foarbyld

Klikje op de knop hjirûnder om in toast sjen te litten (gepositioneerd mei ús nutsbedriuwen yn 'e rjochter ûnderhoeke) dy't standert ferburgen is.

Hello, world! This is a toast message.

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

Wy brûke it folgjende JavaScript om ús live toast-demo te triggerjen:

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

    toast.show()
  })
}

Trochsichtich

Toasten binne wat trochsichtich om te kombinearjen mei wat ûnder har is.

Hallo wrâld! Dit is in toast berjocht.

<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

Jo kinne steapele toasts troch wrapping se yn in toast container, dat sil fertikaal tafoegje wat spacing.

Sjen? Krekt lykas dit.

Heads up, toast sil steapele automatysk

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

Oanpaste ynhâld

Pas jo toasts oan troch subkomponinten te ferwiderjen, se oan te passen mei nutsbedriuwen , of troch jo eigen markup ta te foegjen. Hjir hawwe wy in ienfâldiger toast makke troch de standert te ferwiderjen .toast-header, in oanpaste hide-ikoan ta te foegjen fan Bootstrap Icons , en guon flexbox-helpprogramma's te brûken om de yndieling oan te passen.

Hallo wrâld! Dit is in toast berjocht.

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

As alternatyf kinne jo ek ekstra kontrôles en komponinten tafoegje oan toasts.

Hallo wrâld! Dit is in toast berjocht.

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

Kleurskema's

Bouwe op it boppesteande foarbyld, kinne jo ferskate toastkleurskema's meitsje mei ús kleur- en eftergrûnhelpprogramma 's. Hjir hawwe wy tafoege .bg-primaryen .text-whiteoan 'e .toast, en dan tafoege .btn-close-whiteoan ús slute knop. Foar in skerpe râne, wy fuortsmite de standert grins mei .border-0.

Hallo wrâld! Dit is in toast berjocht.

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

Pleatsing

Plak toasts mei oanpaste CSS as jo se nedich hawwe. Rjochts boppe wurdt faak brûkt foar notifikaasjes, lykas de boppeste midden. As jo mar ea sille sjen litte ien toast op in tiid, set de posisjonearring stilen rjocht op 'e .toast.

Hallo wrâld! Dit is in toast berjocht.

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

Foar systemen dy't mear notifikaasjes generearje, beskôgje it brûken fan in wrappingselemint sadat se maklik kinne stapelje.

Sjen? Krekt lykas dit.

Heads up, toast sil steapele automatysk

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

Jo kinne ek fancy wurde mei flexbox-hulpprogramma's om toasts horizontaal en / of fertikaal út te rjochtsjen.

Hallo wrâld! Dit is in toast berjocht.

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

Tagonklikheid

Toasts binne bedoeld om lytse ûnderbrekkings te wêzen foar jo besikers of brûkers, dus om dy te helpen mei skermlêzers en ferlykbere assistintetechnologyen, moatte jo jo toasts yn in aria-liveregio ynpakke . Feroarings yn libbene regio's (lykas ynjeksje / bywurkjen fan in toastkomponint) wurde automatysk oankundige troch skermlêzers sûnder de fokus fan 'e brûker te ferpleatsen of de brûker oars te ûnderbrekken. Dêrneist omfetsje aria-atomic="true"om te soargjen dat de hiele toast altyd wurdt oankundige as ien (atomêre) ienheid, yn stee fan gewoan oan te kundigjen wat feroare is (wat kin liede ta problemen as jo mar in part fan 'e ynhâld fan' e toast bywurkje, of as jo deselde toastynhâld werjaan op in letter momint). As de needsaaklike ynformaasje wichtich is foar it proses, bygelyks foar in list mei flaters yn in formulier, brûk dan de warskôgingskomponintynstee fan toast.

Tink derom dat de live regio oanwêzich wêze moat yn 'e markearring foardat de toast wurdt generearre of bywurke. As jo dynamysk generearje beide tagelyk en ynjeksje se yn 'e side, se wurde oer it algemien net oankundige troch assistinte technologyen.

Jo moatte ek oanpasse de roleen aria-livenivo ôfhinklik fan de ynhâld. As it in wichtich berjocht is lykas in flater, brûk dan role="alert" aria-live="assertive", oars brûk role="status" aria-live="polite"attributen.

As de ynhâld dy't jo werjaan feroaret, wês wis dat jo de delaytime -out bywurkje , sadat brûkers genôch tiid hawwe om de toast te lêzen.

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

As jo brûke autohide: false, moatte jo in slute knop tafoegje om brûkers de toast te ferlitten.

Hallo wrâld! Dit is in toast berjocht.

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

Hoewol it technysk mooglik is om fokusbere / aksjebere kontrôles (lykas ekstra knoppen of keppelings) ta te foegjen yn jo toast, moatte jo foarkomme dat jo dit dwaan foar autohiding toasts. Sels as jo de toast in lange delaytiid jouwe , kinne brûkers fan toetseboerd en assistinte technology it dreech fine om de toast op 'e tiid te berikken om aksje te nimmen (om't toasts gjin fokus krije as se werjûn wurde). As jo perfoarst moatte hawwe fierdere kontrôles, wy riede in gebrûk in toast mei autohide: false.

Sass

Fariabelen

$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($black, .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($black, .05);

Gebrûk

Inisjalisearje toasts fia JavaScript:

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

Triggers

Untslach kin berikt wurde mei it dataattribút op in knop binnen de toast lykas hjirûnder oantoand:

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

of op in knop bûten de toast mei de data-bs-targetlykas hjirûnder oantoand:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-bs-, lykas yn data-bs-animation="".

Namme	Type	Standert	Beskriuwing
`animation`	boolean	`true`	Tapasse in CSS fade oergong nei de toast
`autohide`	boolean	`true`	Auto ferbergje de toast
`delay`	nûmer	`5000`	Fertraging ferbergjen fan de toast (ms)

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

sjen litte

Bliuwt in elemint syn toast. Keart werom nei de beller foardat de toast eins is toand (dat wol sizze foardat it shown.bs.toastevenemint bart). Jo moatte dizze metoade manuell neame, ynstee sil jo toast net sjen.

toast.show()

ferstopje

Ferberget in elemint syn toast. Keart werom nei de beller foardat de toast eins ferburgen is (dus foardat it hidden.bs.toastevenemint bart). Jo moatte dizze metoade manuell neame as jo makke autohidehawwe false.

toast.hide()

disponearje

Ferberget in elemint syn toast. Jo toast bliuwt op 'e DOM, mar sil net mear sjen.

toast.dispose()

getInstance

Statyske metoade wêrmei jo te krijen de toast eksimplaar assosjearre mei in DOM elemint

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

getOrCreateInstance

Statyske metoade wêrmei jo de toasteksimplaar kinne krije dy't assosjeare is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net is inisjalisearre

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

Eveneminten

Event type	Beskriuwing
`show.bs.toast`	Dit evenemint fjoer fuortendaliks as de `show`eksimplaar metoade wurdt oanroppen.
`shown.bs.toast`	Dit evenemint wurdt ûntslein as de toast is makke sichtber foar de brûker.
`hide.bs.toast`	Dit barren wurdt fuortendaliks ûntslein as de `hide`eksimplaarmetoade oanroppen is.
`hidden.bs.toast`	Dit evenemint wurdt ûntslein as de toast is klear mei in ferburgen fan de brûker.

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