Source

Heilbroodjies

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

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:

  • As jy ons JavaScript vanaf die bron bou, vereisutil.js dit .
  • Toasts is intekening vir prestasieredes, so jy moet dit self inisialiseer .
  • Neem asseblief kennis dat jy verantwoordelik is vir die posisionering van heildronke.
  • 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.

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

Deurskynend

Roosterbroodjies is ook effens deurskynend, so hulle meng oor alles wat hulle mag voorkom. Vir blaaiers wat die backdrop-filterCSS-eienskap ondersteun, sal ons ook probeer om die elemente onder 'n heildronk te vervaag.

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

Stapel

Wanneer jy veelvuldige roosterbrood het, is ons verstek om dit vertikaal op 'n leesbare manier te stapel.

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

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! Hierdie is 'n heildronk boodskap. 
<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>

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

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

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

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

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 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 by '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 om te verseker dat mense genoeg tyd het om die heildronk te lees.

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

Wanneer jy gebruik autohide: false, moet jy 'n toemaakknoppie byvoeg om gebruikers toe te laat om die roosterbrood af te wys.

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

Gebruik

Inisialiseer heildronke via JavaScript:

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

Opsies

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

Naam Tik Verstek Beskrywing
animasie boolean waar Pas 'n CSS-vervaag-oorgang op die roosterbrood toe
outomaties versteek boolean waar Versteek die roosterbrood outomaties
vertraging nommer 500 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 .

$().toast(options)

Heg 'n roosterbroodhanteerder aan 'n elementversameling.

.toast('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.

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

.toast('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.

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

.toast('dispose')

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

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

Gebeurtenisse

Soort gebeurtenis Beskrywing
wys.bs.roosterbrood Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
getoon.bs.roosterbrood Hierdie gebeurtenis word afgevuur wanneer die heildronk vir die gebruiker sigbaar gemaak is.
verberg.bs.roosterbrood Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
versteekte.bs.roosterbrood Hierdie gebeurtenis word afgevuur wanneer die heildronk klaar vir die gebruiker weggesteek is. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})