Heilbroodjies

Stuur kennisgewings aan jou besoekers met 'n heildronk, 'n liggewig en maklik aanpasbare waarskuwingsboodskap.

Op hierdie bladsy

Toasts is liggewig-kennisgewings wat ontwerp is om die stootkennisgewings na te boots wat deur mobiele en rekenaarbedryfstelsels gewild gemaak is. Hulle is gebou met flexbox, so hulle is maklik om in lyn te bring en te plaas.

Oorsig

Dinge om te weet wanneer jy die toast-inprop gebruik:

Toasts is intekening vir prestasieredes, so jy moet dit self inisialiseer .
Heilbrood sal outomaties versteek as jy nie spesifiseer nie autohide: false.

Die animasie-effek van hierdie komponent is afhanklik van die prefers-reduced-motionmedianavraag. Sien die verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .

Voorbeelde

Basies

Om verlengbare en voorspelbare heildronke aan te moedig, beveel ons 'n kopskrif en liggaam aan. Roosterbroodkoppe gebruik display: flex, wat maklike belyning van inhoud moontlik maak danksy ons marge- en flexbox-hulpmiddels.

Roosterbroodjies is so buigsaam as wat jy nodig het en het baie min vereiste opmaak. Ons benodig ten minste 'n enkele element om jou "geroosterde" inhoud te bevat en moedig 'n afwysknoppie sterk aan.

Hello Wêreld! Dit is 'n heildronk boodskap.

<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 het ons skrifte die .hideklas dinamies bygevoeg om 'n heildronk heeltemal weg te steek (met display:none, eerder as net met opacity:0). Dit is nou nie meer nodig nie. Vir terugwaartse versoenbaarheid sal ons skrif egter voortgaan om die klas te wissel (al is daar geen praktiese behoefte daarvoor nie) tot die volgende hoof weergawe.

Lewende voorbeeld

Klik op die knoppie hieronder om 'n heildronk (geplaas met ons nutsprogramme in die onderste regterhoek) te wys wat by verstek versteek 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>

Ons gebruik die volgende JavaScript om ons lewendige toast-demo te aktiveer:

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

    toast.show()
  })
}

Deurskynend

Roosterbroodjies is effens deurskynend om in te meng met wat onder hulle is.

Hello Wêreld! Dit is 'n heildronk boodskap.

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

Stapel

Jy kan roosterbroodjies stapel deur dit in 'n roosterbroodhouer toe te draai, wat vertikaal 'n bietjie spasiëring sal byvoeg.

Sien? Net soos hierdie.

Let op, roosterbrood sal outomaties gestapel word

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

Pasgemaakte inhoud

Pas jou heildronke aan deur sub-komponente te verwyder, dit aan te pas met nutsprogramme , of deur jou eie opmaak by te voeg. Hier het ons 'n eenvoudiger roosterbrood geskep deur die verstek te verwyder .toast-header, 'n pasgemaakte versteek-ikoon van Bootstrap Icons by te voeg , en 'n paar flexbox-hulpmiddels te gebruik om die uitleg aan te pas.

Hello Wêreld! Dit is 'n heildronk boodskap.

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

Alternatiewelik kan jy ook bykomende kontroles en komponente by roosterbrood voeg.

Hello Wêreld! Dit is 'n heildronk boodskap.

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

Kleurskemas

Op die voorbeeld hierbo kan jy verskillende roosterbrood-kleurskemas skep met ons kleur- en agtergrondhulpmiddels . Hier het ons .bg-primaryen .text-whiteby die gevoeg .toast, en dan by .btn-close-whiteons toemaakknoppie gevoeg. Vir 'n skerp rand verwyder ons die verstekgrens met .border-0.

Hello Wêreld! Dit is 'n heildronk boodskap.

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

Plasing

Plaas roosterbrood met pasgemaakte CSS soos jy dit nodig het. Regs bo word dikwels vir kennisgewings gebruik, net soos die boonste middel. As jy net een heildronk op 'n slag gaan wys, plaas die posisioneringstyle reg op die .toast.

Hello Wêreld! Dit is 'n heildronk boodskap.

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

Vir stelsels wat meer kennisgewings genereer, oorweeg dit om 'n wikkelelement te gebruik sodat hulle maklik kan stapel.

Sien? Net soos hierdie.

Let op, roosterbrood sal outomaties gestapel word

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

Jy kan ook fancy raak met flexbox-hulpmiddels om roosterbrood horisontaal en/of vertikaal in lyn te bring.

Hello Wêreld! Dit is 'n heildronk boodskap.

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

Toeganklikheid

Heildronk is bedoel om klein onderbrekings vir jou besoekers of gebruikers te wees, so om diegene met skermlesers en soortgelyke ondersteunende tegnologieë te help, moet jy jou heildronke in 'n aria-livestreek toevou . Veranderinge aan lewende streke (soos die inspuiting/opdatering van 'n roosterbrood-komponent) word outomaties deur skermlesers aangekondig sonder dat dit nodig is om die gebruiker se fokus te verskuif of die gebruiker andersins te onderbreek. Sluit ook in aria-atomic="true"om te verseker dat die hele roosterbrood altyd as 'n enkele (atomiese) eenheid aangekondig word, eerder as om net aan te kondig wat verander is (wat tot probleme kan lei as jy net 'n deel van die roosterbrood se inhoud opdateer, of as dieselfde roosterbrood-inhoud vertoon word op 'n later tydstip). As die nodige inligting belangrik is vir die proses, bv. vir 'n lys van foute in 'n vorm, gebruik dan die waarskuwingskomponentin plaas van roosterbrood.

Let daarop dat die lewendige streek in die opmaak teenwoordig moet wees voordat die roosterbrood gegenereer of opgedateer word. As jy albei op dieselfde tyd dinamies genereer en dit in die bladsy inspuit, sal hulle oor die algemeen nie deur ondersteunende tegnologieë aangekondig word nie.

roleJy moet ook die en vlak aanpas aria-livena gelang van die inhoud. As dit 'n belangrike boodskap soos 'n fout is, gebruik role="alert" aria-live="assertive", anders gebruik role="status" aria-live="polite"kenmerke.

Soos die inhoud wat jy wys verander, maak seker dat jy die delayuitteltyd opdateer sodat gebruikers genoeg tyd het om die heildronk te lees.

<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 jy gebruik autohide: false, moet jy 'n toemaakknoppie byvoeg om gebruikers toe te laat om die roosterbrood af te wys.

Hello Wêreld! Dit is 'n heildronk boodskap.

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

Alhoewel dit tegnies moontlik is om fokusbare/uitvoerbare kontroles (soos bykomende knoppies of skakels) in jou roosterbrood by te voeg, moet jy dit vermy om roosterbrood outomaties te verberg. Selfs al gee jy die roosterbrood 'n lang delaytydsverloop , kan sleutelbord- en hulptegnologiegebruikers dit moeilik vind om die roosterbrood betyds te bereik om aksie te neem (aangesien roosterbrood nie fokus kry wanneer dit vertoon word nie). As jy absoluut verdere kontroles moet hê, beveel ons aan om 'n roosterbrood met autohide: false.

Sass

Veranderlikes

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

Gebruik

Inisialiseer heildronke via JavaScript:

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

Snellers

Ontslag kan bereik word met die datakenmerk op 'n knoppie binne die heildronk soos hieronder gedemonstreer:

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

of op 'n knoppie buite die roosterbrood met behulp van die data-bs-targetsoos hieronder gedemonstreer:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-bs-, soos in data-bs-animation="".

Naam	Tik	Verstek	Beskrywing
`animation`	boolean	`true`	Pas 'n CSS-vervaag-oorgang op die roosterbrood toe
`autohide`	boolean	`true`	Versteek die roosterbrood outomaties
`delay`	nommer	`5000`	Vertraag om die heildronk te versteek (ms)

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting .

Wys

Onthul 'n element se heildronk. Keer terug na die oproeper voordat die heildronk werklik gewys is (dws voor die shown.bs.toastgebeurtenis plaasvind). Jy moet hierdie metode handmatig bel, in plaas daarvan sal jou roosterbrood nie wys nie.

toast.show()

wegsteek

Versteek 'n element se roosterbrood. Keer terug na die oproeper voordat die heildronk eintlik weggesteek is (dws voor die hidden.bs.toastgebeurtenis plaasvind). Jy moet hierdie metode handmatig aanroep as jy autohidena false.

toast.hide()

wegdoen

Versteek 'n element se roosterbrood. Jou heildronk sal op die DOM bly, maar sal nie meer wys nie.

toast.dispose()

getInstance

Statiese metode wat jou toelaat om die roosterbrood-instansie te kry wat met 'n DOM-element geassosieer word

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

getOrCreateInstance

Statiese metode wat jou toelaat om die toast-instansie te kry wat met 'n DOM-element geassosieer word, of om 'n nuwe een te skep ingeval dit nie geïnisialiseer is nie

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

Gebeurtenisse

Soort gebeurtenis	Beskrywing
`show.bs.toast`	Hierdie gebeurtenis begin onmiddellik wanneer die `show`instansiemetode geroep word.
`shown.bs.toast`	Hierdie gebeurtenis word afgevuur wanneer die heildronk vir die gebruiker sigbaar gemaak is.
`hide.bs.toast`	Hierdie gebeurtenis word onmiddellik afgevuur wanneer die `hide`instansiemetode geroep is.
`hidden.bs.toast`	Hierdie gebeurtenis word afgevuur wanneer die heildronk klaar vir die gebruiker weggesteek is.

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