Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

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.

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

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

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

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

    toast.show()
  })
}

Deurskynend

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

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>

Stapel

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

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>

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.

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>

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

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>

Kleurskemas

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

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>

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.

Bootstrap 11 minute gelede
Hello Wêreld! Dit is 'n heildronk boodskap.
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>

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

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>

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

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>

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.

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>

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.

CSS

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik heildronke nou plaaslike CSS-veranderlikes .toastvir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, dus word Sass-aanpassing ook steeds ondersteun.

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

Inisialiseer heildronke via JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

Aangesien opsies deur data-kenmerke of JavaScript deurgegee kan word, kan jy 'n opsienaam byvoeg data-bs-, soos in data-bs-animation="{value}". Maak seker dat jy die kastipe van die opsienaam verander van " camelCase " na " kebab-case " wanneer die opsies deur data-kenmerke deurgegee word. Gebruik byvoorbeeld in data-bs-custom-class="beautifier"plaas van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteun alle komponente 'n eksperimentele gereserveerde data-kenmerk data-bs-configwat eenvoudige komponentkonfigurasie as 'n JSON-string kan huisves. Wanneer 'n element data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"kenmerke het, sal die finale titlewaarde wees 456en die afsonderlike data-kenmerke sal waardes wat op gegee word, ignoreer data-bs-config. Daarbenewens kan bestaande data-kenmerke JSON-waardes soos data-bs-delay='{"show":0,"hide":150}'.

Naam Tik Verstek Beskrywing
animation boolean true Pas 'n CSS-vervaag-oorgang op die roosterbrood toe.
autohide boolean true Versteek die roosterbrood outomaties na die vertraging.
delay nommer 5000 Vertraag in millisekondes voordat die roosterbrood weggesteek word.

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 .

Metode Beskrywing
dispose Versteek 'n element se roosterbrood. Jou heildronk sal op die DOM bly, maar sal nie meer wys nie.
getInstance Statiese metode wat jou toelaat om die roosterbrood-instansie te kry wat met 'n DOM-element geassosieer word.
Byvoorbeeld: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Wys 'n Bootstrap-roosterbrood-instansie.
getOrCreateInstance Statiese metode wat jou toelaat om die toast-instansie te kry wat met 'n DOM-element geassosieer word, of 'n nuwe een te skep, ingeval dit nie geïnisialiseer is nie.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Wys 'n Bootstrap-roosterbrood-instansie.
hide 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.
isShown Wys 'n boolean volgens roosterbrood se sigbaarheidstatus.
show 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.

Gebeurtenisse

Gebeurtenis Beskrywing
hide.bs.toast Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
hidden.bs.toast Hierdie gebeurtenis word afgevuur wanneer die heildronk klaar vir die gebruiker weggesteek is.
show.bs.toast Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
shown.bs.toast Hierdie gebeurtenis word afgevuur wanneer die heildronk vir die gebruiker sigbaar gemaak is. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})