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 sustavi. Izrađeni su od flexboxa, tako da ih je lako poravnati i postaviti.

Pregled

Stvari koje treba znati kada koristite dodatak za tost:

Toastovi su opt-in zbog performansi, tako da ih morate sami inicijalizirati .
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.

Pozdrav svijete! Ovo je zdravica.

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

Uživo

Pritisnite donji gumb za prikaz tosta (pozicioniranog s našim uslužnim programima u donjem desnom kutu) koji je prema zadanim postavkama skriven s .hide.

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

Proziran

Tostovi su blago prozirni kako bi se stopili s onim što je ispod njih.

Pozdrav svijete! Ovo je zdravica.

<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 složiti tako da ih zamotate u posudu za tost, što će okomito dodati razmak.

Vidjeti? Bas ovako.

Pažnja, tostovi će se slagati automatski

<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 tostove uklanjanjem podkomponenti, podešavanjem pomoću uslužnih programa ili dodavanjem vlastite oznake. Ovdje smo stvorili jednostavniji tost uklanjanjem zadane postavke .toast-header, dodavanjem prilagođene ikone za skrivanje iz Bootstrap Icons i korištenjem nekih uslužnih programa flexboxa za prilagodbu izgleda.

Pozdrav svijete! Ovo je zdravica.

<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, tostovima možete dodati dodatne kontrole i komponente.

Pozdrav svijete! Ovo je zdravica.

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

Sheme boja

Nadovezujući se na gornji primjer, možete stvoriti različite sheme boja tosta s našim uslužnim programima za boju i pozadinu . Ovdje smo dodali .bg-primaryi .text-whitena .toast, a zatim dodali .btn-close-whitena naš gumb za zatvaranje. Za oštriji rub, uklanjamo zadani obrub pomoću .border-0.

Pozdrav svijete! Ovo je zdravica.

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

Pozdrav svijete! Ovo je zdravica.

<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 sustave koji generiraju više obavijesti, razmislite o korištenju elementa za omatanje kako bi se mogli jednostavno slagati.

Vidjeti? Bas ovako.

Pažnja, tostovi će se slagati automatski

<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 s uslužnim programima flexbox za vodoravno i/ili okomito poravnavanje tosta.

Pozdrav svijete! Ovo je zdravica.

<!-- 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 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. Osim toga, uključite aria-atomic="true"kako biste osigurali da se cijela zdravica uvijek najavljuje kao jedna (atomska) jedinica, umjesto da se samo 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 u kasnijoj točki vremena). 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 bi korisnici imali dovoljno vremena za čitanje tosta.

<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 gumb za zatvaranje kako bi korisnici mogli odbaciti tost.

Pozdrav svijete! Ovo je zdravica.

<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 dodatni gumbi ili veze) u vaš tost, trebali biste to izbjegavati za tostove koji se automatski skrivaju. Čak i ako zdravici date dugo delayvremensko ograničenje , korisnicima tipkovnice i pomoćne tehnologije može biti teško doći do zdravice na vrijeme da poduzmu radnju (budući da zdravice ne dobivaju fokus kada su prikazane). Ako apsolutno morate imati dodatne kontrole, preporučujemo korištenje tosta s 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(0, 0, 0, .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(0, 0, 0, .05);

Korištenje

Inicijaliziraj zdravice putem JavaScripta:

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

Mogućnosti

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

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

pokazati

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.

toast.show()

sakriti

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.

toast.hide()

raspolagati

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

toast.dispose()

getInstance

Statička metoda koja vam omogućuje da dobijete scrollspy instancu povezanu s 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ćuje dobivanje instance scrollspy povezane s DOM elementom ili stvaranje nove 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 aktivira se odmah kada `show`se pozove metoda instance.
`shown.bs.toast`	Ovaj događaj se pokreće kada tost postane vidljiv korisniku.
`hide.bs.toast`	Ovaj se događaj aktivira odmah nakon `hide`pozivanja metode instance.
`hidden.bs.toast`	Ovaj događaj se pokreće kada tost više nije skriven od korisnika.

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