in English

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 sistemi. Napravljeni su sa flexboxom, tako da ih je lako poravnati i pozicionirati.

Pregled

Stvari koje trebate znati kada koristite dodatak za tost:

  • Ako gradite naš JavaScript iz izvora, on zahtijevautil.js .
  • Zdravice se mogu uključiti iz razloga performansi, tako da ih morate sami inicijalizirati .
  • Imajte na umu da ste vi odgovorni za pozicioniranje zdravica.
  • Zdravice će se automatski sakriti ako ne navedete autohide: false.
Efekt animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak o smanjenom pokretu u našoj dokumentaciji o pristupačnosti .

Primjeri

Basic

Za podsticanje proširivih i predvidljivih zdravica, preporučujemo zaglavlje i tijelo. Tost zaglavlja koriste display: flex, omogućavajući lako poravnavanje sadržaja zahvaljujući našim marginama i flexbox uslužnim programima.

Tostovi su fleksibilni koliko vam je potrebno i imaju vrlo malo potrebnih oznaka. U najmanju ruku, zahtijevamo jedan element koji sadrži vaš "nazdravljeni" sadržaj i snažno potičemo dugme 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>

Uživo

Kliknite na dugme ispod da prikažete zdravicu (pozicioniranu sa našim uslužnim programima u donjem desnom uglu) koja je podrazumevano skrivena sa .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Translucent

Tostovi su blago prozirni da se stapaju sa onim što je ispod njih.

<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 zdravica, zadano ih postavljamo 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 sa prilagođenim CSS-om kako vam trebaju. Gornji desni se često koristi za obavještenja, kao i gornji srednji. Ako ćete ikada pokazati samo jednu zdravicu odjednom, stavite stilove pozicioniranja direktno na .toast.

Bootstrap prije 11 minuta
Zdravo svijete! Ovo je poruka zdravice. 
<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 sisteme koji generiraju više obavijesti, razmislite o korištenju elementa omota kako bi se mogli lako 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 sa flexbox uslužnim programima za poravnavanje zdravica vodoravno i/ili okomito.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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 da budu mali prekidi vašim posjetiteljima ili korisnicima, pa da biste pomogli onima koji imaju čitače ekrana i slične pomoćne tehnologije, trebali biste umotati svoje zdravice u aria-liveregiju . Promjene u živim regijama (kao što je ubacivanje/ažuriranje komponente tosta) automatski najavljuju čitači ekrana bez potrebe da pomjere fokus korisnika ili na drugi način ometaju korisnika. Dodatno, uključite aria-atomic="true"kako biste osigurali da se cijela zdravica uvijek najavljuje kao jedna (atomska) jedinica, umjesto da samo najavljujete što je promijenjeno (što bi moglo dovesti do problema ako ažurirate samo dio sadržaja zdravice ili ako prikazujete isti sadržaj zdravice u kasnijem trenutku). Ako su potrebne informacije važne za proces, npr. za listu grešaka u obrascu, tada koristite komponentu upozorenjaumjesto tosta.

Imajte na umu da živa regija mora biti prisutna u označavanju prije nego što se zdravica generira ili ažurira. Ako dinamički generirate oboje u isto vrijeme i ubacite ih na stranicu, oni uglavnom neće biti najavljeni pomoću pomoćnih tehnologija.

Također morate prilagoditi rolei aria-livenivo ovisno o sadržaju. Ako se radi o važnoj poruci kao što je greška, koristite role="alert" aria-live="assertive", inače koristite role="status" aria-live="polite"atribute.

Kako se sadržaj koji prikazujete mijenja, obavezno ažurirajte delayvremensko ograničenje kako bi korisnici imali dovoljno vremena da pročitaju zdravicu.

<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 dugme za zatvaranje kako biste omogućili korisnicima da odbace zdravicu.

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

Iako je tehnički moguće dodati kontrole koje se mogu fokusirati/djelovati (kao što su dodatna dugmad ili linkovi) u zdravicu, trebali biste izbjegavati to da radite za automatsko skrivanje zdravica. Čak i ako zdravici date dugo delayvremensko ograničenje , korisnicima tastature i pomoćne tehnologije može biti teško doći do zdravice na vrijeme da preduzmu akciju (pošto zdravice ne primaju fokus kada su prikazane). Ako apsolutno morate imati dodatne kontrole, preporučujemo korištenje tosta sa autohide: false.

JavaScript ponašanje

Upotreba

Inicijalizirajte tostove putem JavaScripta:

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

Opcije

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

Ime Tip Default Opis
animacija boolean tačno Primijenite CSS fade prijelaz na tost
autohide boolean tačno Automatski sakrij zdravicu
kašnjenje broj 500 Kašnjenje skrivanja zdravice (ms)

Metode

Asinhrone metode i prijelazi

Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .

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

$().toast(options)

Pripaja rukovao tostom kolekciji elemenata.

.toast('show')

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

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

.toast('hide')

Sakriva zdravicu elementa. Vraća se pozivaocu prije nego što je zdravica zaista 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')

Sakriva zdravicu elementa. Vaša zdravica će ostati 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 se aktivira odmah kada showse pozove metoda instance.
prikazano.bs.zdravica Ovaj događaj se pokreće kada zdravica postane vidljiva korisniku.
hide.bs.toast Ovaj događaj se pokreće odmah kada se hidepozove metoda instance.
hidden.bs.toast Ovaj događaj se pokreće kada se zdravica završi sa skrivanjem od korisnika. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})