Source

Zdravice

Push obavijesti svojim posjetiteljima uz zdravicu, laganu i lako prilagodljivu poruku upozorenja.

Zdravice su lagane obavijesti dizajnirane da oponašaju push obavijesti koje su popularizirali mobilni i desktop operativni sustavi. Izrađeni su od flexboxa, tako da ih je lako poravnati i postaviti.

Pregled

Stvari koje treba znati kada koristite dodatak za tost:

  • Ako gradite naš JavaScript iz izvora, to zahtijevautil.js .
  • Toastovi su opt-in zbog performansi, tako da ih morate sami inicijalizirati .
  • Imajte na umu da ste vi odgovorni za pozicioniranje tosta.
  • Tostovi će se automatski sakriti ako ne navedete autohide: false.

Učinak animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak smanjenog kretanja u našoj dokumentaciji o pristupačnosti .

Primjeri

Osnovni, temeljni

Kako bismo potaknuli proširive i predvidljive zdravice, preporučujemo zaglavlje i tijelo. Toast zaglavlja koriste display: flex, omogućujući jednostavno usklađivanje sadržaja zahvaljujući našim uslužnim programima za margine i flexbox.

Toastovi su fleksibilni koliko vam je potrebno i imaju vrlo malo potrebne oznake. Minimalno zahtijevamo da jedan element sadrži vaš "prepečeni" sadržaj i snažno potičemo gumb za odbacivanje.

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

Proziran

Tostovi su također blago prozirni, pa se stapaju s onim što se može činiti. Za preglednike koji podržavaju backdrop-filtersvojstvo CSS, također ćemo pokušati zamutiti elemente ispod tosta.

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

Slaganje

Kada imate više tosta, prema zadanim postavkama postavljamo ih okomito na čitljiv način.

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

Plasman

Postavite zdravice s prilagođenim CSS-om onako kako ih trebate. Gornji desni često se koristi za obavijesti, kao i gornji srednji. Ako ćete ikad prikazivati ​​samo jedan tost odjednom, postavite stilove pozicioniranja točno na .toast.

Bootstrap prije 11 minuta
Pozdrav svijete! Ovo je zdravica. 
<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>

Za sustave koji generiraju više obavijesti, razmislite o korištenju elementa za omatanje kako bi se mogli jednostavno slagati.

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

Također možete postati fensi s uslužnim programima flexbox za vodoravno i/ili okomito poravnavanje tosta.

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

Pristupačnost

Zdravice su namijenjene malim prekidima za vaše posjetitelje ili korisnike, tako da biste pomogli onima koji imaju čitače zaslona i slične pomoćne tehnologije, trebali biste zamotati svoje zdravice u aria-liveregiju . Promjene živih regija (kao što je ubacivanje/ažuriranje toast komponente) automatski se najavljuju od strane čitača zaslona bez potrebe za pomicanjem fokusa korisnika ili na drugi način prekidanjem korisnika. Dodatno, uključite aria-atomic="true"kako biste osigurali da se cijela zdravica uvijek najavljuje kao jedna (atomska) jedinica, umjesto da se najavljuje što je promijenjeno (što bi moglo dovesti do problema ako ažurirate samo dio sadržaja zdravice ili ako prikazujete isti sadržaj zdravice na kasnija vremenska točka). Ako su potrebne informacije važne za proces, npr. za popis pogrešaka u obrascu, tada koristite komponentu upozorenjaumjesto dvopeka.

Imajte na umu da živa regija mora biti prisutna u označavanju prije nego što se tost generira ili ažurira. Ako dinamički generirate oboje u isto vrijeme i umetnete ih na stranicu, općenito ih neće objaviti pomoćne tehnologije.

Također trebate prilagoditi razinu rolei aria-liveovisno o sadržaju. Ako se radi o važnoj poruci poput pogreške, upotrijebite role="alert" aria-live="assertive", inače upotrijebite role="status" aria-live="polite"atribute.

Kako se sadržaj koji prikazujete mijenja, svakako ažurirajte delayvremensko ograničenje kako biste osigurali da ljudi imaju dovoljno vremena za čitanje zdravice.

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

Kada koristite autohide: false, morate dodati gumb za zatvaranje kako bi korisnici mogli odbaciti tost.

<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 ponašanje

Korištenje

Inicijaliziraj zdravice putem JavaScripta:

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

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-, kao u data-animation="".

Ime Tip Zadano Opis
animacija Booleov pravi Primijenite CSS fade prijelaz na tost
autohide Booleov pravi Automatski sakrij tost
odgoditi broj 500 Odgoda skrivanja tosta (ms)

Metode

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija .

$().toast(options)

Priključuje alat za rukovanje zbirkom elemenata.

.toast('show')

Otkriva tost elementa. Vraća se pozivatelju prije nego što je tost stvarno prikazan (tj. prije nego što se shown.bs.toastdogađaj dogodi). Morate ručno pozvati ovu metodu, umjesto toga vaš tost se neće prikazati.

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

.toast('hide')

Skriva tost elementa. Vraća se pozivatelju prije nego što je zdravica zapravo skrivena (tj. prije nego što se hidden.bs.toastdogađaj dogodi). Morate ručno pozvati ovu metodu ako ste autohidenapravili false.

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

.toast('dispose')

Skriva tost elementa. Vaš tost ostat će na DOM-u, ali se više neće prikazivati.

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

Događaji

Vrsta događaja Opis
show.bs.toast Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano.bs.toast Ovaj događaj se pokreće kada tost postane vidljiv korisniku.
sakriti.bs.toast Ovaj se događaj aktivira odmah nakon hidepozivanja metode instance.
skriven.bs.toast Ovaj događaj se pokreće kada tost više nije skriven od korisnika. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})