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 su uključene 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.

html

<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="toast-container position-fixed bottom-0 end-0 p-3">
  <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:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const 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.

html

<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

html

<div class="toast-container position-static">
  <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.

html

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

html

<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

Nadovezujući se na gornji primjer, možete kreirati različite sheme boja tosta pomoću naših uslužnih programa za boje i pozadinu . Ovdje smo dodali .text-bg-primary, .toasta 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.

html

<div class="toast align-items-center text-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.

html

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

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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.

html

<!-- 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 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 je to važna poruka kao što je greška, koristite role="alert" aria-live="assertive", u suprotnom 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 da biste omogućili korisnicima da odbace zdravicu.

Zdravo svijete! Ovo je poruka zdravice.

html

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

CSS

Varijable

Dodato u v5.2.0

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, tostovi sada koriste lokalne CSS varijable .toastza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Okidači

Otpuštanje se može postići pomoću dataatributa 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

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite tip slučaja naziva opcije iz “ camelCase ” u “ kebab-case ” prilikom prosljeđivanja opcija putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjesto data-bs-customClass="beautifier".

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može smjestiti jednostavnu konfiguraciju komponente kao JSON string. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka će nadjačati vrijednosti date na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Ime	Tip	Default	Opis
`animation`	boolean	`true`	Primijenite CSS fade prijelaz na tost.
`autohide`	boolean	`true`	Automatski sakrijte tost nakon kašnjenja.
`delay`	broj	`5000`	Kašnjenje u milisekundama prije skrivanja zdravice.

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 .

Metoda	Opis
`dispose`	Sakriva zdravicu elementa. Vaša zdravica će ostati na DOM-u, ali se više neće prikazivati.
`getInstance`	Statička metoda koja vam omogućava da dobijete tost instancu povezanu sa DOM elementom. Na primjer: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Vraća Bootstrap tost instancu.
`getOrCreateInstance`	Statička metoda koja vam omogućava da dobijete tost instancu povezanu sa DOM elementom ili kreirate novu, u slučaju da nije inicijalizirana. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Vraća Bootstrap tost instancu.
`hide`	Sakriva zdravicu elementa. Vraća se pozivaocu prije nego što je zdravica zaista skrivena (tj. prije nego što se `hidden.bs.toast`događaj dogodi). Morate ručno pozvati ovu metodu ako ste `autohide`napravili `false`.
`isShown`	Vraća logičku vrijednost prema stanju vidljivosti tosta.
`show`	Otkriva tost elementa. Vraća se pozivaocu prije nego što je zdravica zaista prikazana (tj. prije nego što se `shown.bs.toast`događaj dogodi). Morate ručno pozvati ovu metodu, umjesto toga vaša zdravica se neće prikazati.

Događaji

Događaj	Opis
`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.
`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.

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