Zdravice

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

Na ovoj stranici

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:

Zdravice se mogu uključiti iz razloga performansi, tako da ih morate sami inicijalizirati .
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.

Zdravo svijete! Ovo je poruka zdravice.

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

Ranije su naše skripte dinamički dodavale .hideklasu da bi potpuno sakrile zdravicu (sa display:none, a ne samo sa opacity:0). Ovo sada više nije potrebno. Međutim, radi kompatibilnosti unatrag, naša skripta će nastaviti da prebacuje klasu (iako za to nema praktične potrebe) do sljedeće veće verzije.

Živi primjer

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

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>

Koristimo sljedeći JavaScript da pokrenemo našu demo zdravicu uživo:

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

    toast.show()
  })
}

Translucent

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

Zdravo svijete! Ovo je poruka zdravice.

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

Slaganje

Tostove možete slagati tako što ćete ih umotati u posudu za tost, što će vertikalno dodati malo razmaka.

Vidiš? Samo ovako.

Pažnja, zdravice će se automatski slagati

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

Prilagođeni sadržaj

Prilagodite svoje zdravice uklanjanjem podkomponenti, podešavanjem uslužnih programa ili dodavanjem vlastite oznake. Ovdje smo napravili jednostavniji tost uklanjanjem zadanog .toast-header, dodavanjem prilagođene ikone za skrivanje iz Bootstrap ikona i korištenjem nekih flexbox uslužnih programa za podešavanje izgleda.

Zdravo svijete! Ovo je poruka zdravice.

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

Alternativno, možete dodati dodatne kontrole i komponente zdravicama.

Zdravo svijete! Ovo je poruka zdravice.

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

Šeme boja

Na osnovu gornjeg primjera, možete kreirati različite sheme boja tosta pomoću naših uslužnih programa za boje i pozadinu . Ovdje smo dodali .bg-primaryi .text-whiteu .toast, a zatim dodali .btn-close-whitenašem dugmetu za zatvaranje. Za oštru ivicu uklanjamo zadanu ivicu pomoću .border-0.

Zdravo svijete! Ovo je poruka zdravice.

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

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.

Zdravo svijete! Ovo je poruka zdravice.

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

Za sisteme koji generiraju više obavijesti, razmislite o korištenju elementa omota kako bi se mogli lako slagati.

Vidiš? Samo ovako.

Pažnja, zdravice će se automatski slagati

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

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

Zdravo svijete! Ovo je poruka zdravice.

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

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 prikažete 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-bs-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.

Zdravo svijete! Ovo je poruka zdravice.

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

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.

Sass

Varijable

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

Upotreba

Inicijalizirajte tostove putem JavaScripta:

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

Okidači

Otpuštanje se može postići dataatributom na dugmetu unutar zdravice kao što je prikazano u nastavku:

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

ili na dugme izvan tosta koristeći data-bs-targetkao što je prikazano u nastavku:

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

Opcije

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

Ime	Tip	Default	Opis
`animation`	boolean	`true`	Primijenite CSS fade prijelaz na tost
`autohide`	boolean	`true`	Automatski sakrij zdravicu
`delay`	broj	`5000`	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 .

show

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

toast.show()

sakriti

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.

toast.hide()

dispose

Sakriva zdravicu elementa. Vaša zdravica će ostati na DOM-u, ali se više neće prikazivati.

toast.dispose()

getInstance

Statička metoda koja vam omogućava da dobijete tost instancu povezanu sa DOM elementom

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

getOrCreateInstance

Statička metoda koja vam omogućava da dobijete tost instancu povezanu s DOM elementom ili kreirate novu u slučaju da nije inicijalizirana

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

Događaji

Vrsta događaja	Opis
`show.bs.toast`	Ovaj događaj se aktivira odmah kada `show`se pozove metoda instance.
`shown.bs.toast`	Ovaj događaj se pokreće kada zdravica postane vidljiva korisniku.
`hide.bs.toast`	Ovaj događaj se pokreće odmah kada se `hide`pozove metoda instance.
`hidden.bs.toast`	Ovaj događaj se pokreće kada se zdravica završi sa skrivanjem od korisnika.

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