Zdravice

Potisna obvestila svojim obiskovalcem z zdravico, lahkim in enostavno prilagodljivim opozorilnim sporočilom.

Na tej strani

Zdravice so lahka obvestila, zasnovana tako, da posnemajo potisna obvestila, ki so jih popularizirali mobilni in namizni operacijski sistemi. Izdelani so s flexboxom, zato jih je enostavno poravnati in namestiti.

Pregled

Kaj morate vedeti pri uporabi vtičnika toast:

Zdravice so opt-in zaradi učinkovitosti, zato jih morate inicializirati sami .
Zdravice se samodejno skrijejo, če ne določite autohide: false.

Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Primeri

Osnovno

Za spodbujanje razširljivih in predvidljivih zdravic priporočamo glavo in telo. Glave Toast uporabljajo display: flex, kar omogoča enostavno poravnavo vsebine zahvaljujoč pripomočkom margin in flexbox.

Toasti so tako prilagodljivi, kot jih potrebujete, in zahtevajo zelo malo pribitka. Zahtevamo, da vsaj en element vsebuje vašo »prepečeno« vsebino in močno spodbujamo gumb za opustitev.

Pozdravljen, svet! To je sporočilo 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>

Prej so naši skripti dinamično dodali .hiderazred, da popolnoma skrijejo zdravico (z display:nonein ne le z opacity:0). To zdaj ni več potrebno. Zaradi združljivosti za nazaj pa bo naš skript še naprej preklapljal razred (čeprav za to ni praktične potrebe) do naslednje večje različice.

Primer v živo

Kliknite spodnji gumb, da prikažete zdravico (postavljeno z našimi pripomočki v spodnjem desnem kotu), ki je privzeto skrita.

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>

Za sprožitev predstavitve zdravice v živo uporabljamo naslednji JavaScript:

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

    toast.show()
  })
}

Prosojno

Toasti so rahlo prosojni, da se zlijejo s tistim, kar je pod njimi.

Pozdravljen, svet! To je sporočilo 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>

Zlaganje

Toaste lahko zložite tako, da jih zavijete v posodo za toast, ki bo navpično dodala nekaj razmika.

vidiš? Tako kot to.

Pozor, toasti se bodo zložili samodejno

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

Vsebina po meri

Prilagodite svoje zdravice tako, da odstranite podkomponente, jih prilagodite s pripomočki ali dodate lastne oznake. Tukaj smo ustvarili enostavnejšo zdravico, tako da smo odstranili privzeto .toast-header, dodali ikono za skrivanje po meri iz ikon Bootstrap in uporabili nekaj pripomočkov flexbox za prilagajanje postavitve.

Pozdravljen, svet! To je sporočilo 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>

Druga možnost je, da zdravicam dodate dodatne kontrole in komponente.

Pozdravljen, svet! To je sporočilo 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>

Barvne sheme

Na podlagi zgornjega primera lahko ustvarite različne barvne sheme toasta z našimi pripomočki za barve in ozadje . Tu smo dodali .bg-primaryin .text-whitev .toast, nato pa dodali .btn-close-whitev naš gumb za zapiranje. Za oster rob odstranimo privzeto obrobo z .border-0.

Pozdravljen, svet! To je sporočilo 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>

Umestitev

Postavite zdravice s CSS po meri, kot jih potrebujete. Zgornji desni se pogosto uporablja za obvestila, prav tako zgornji srednji. Če boste naenkrat prikazali samo en toast, postavite sloge pozicioniranja neposredno na .toast.

Pozdravljen, svet! To je sporočilo 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, ki ustvarjajo več obvestil, razmislite o uporabi ovojnega elementa, da jih je mogoče enostavno zložiti.

vidiš? Tako kot to.

Pozor, toasti se bodo zložili samodejno

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

Za vodoravno in/ali navpično poravnavo toastov si lahko privoščite tudi pripomočke flexbox.

Pozdravljen, svet! To je sporočilo 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>

Dostopnost

Zdravice so namenjene majhnim motnjam obiskovalcev ali uporabnikov, zato za pomoč tistim, ki imajo bralnike zaslona in podobne podporne tehnologije, zavijte svoje zdravice v aria-liveregijo . Spremembe območij v živo (kot je vstavljanje/posodabljanje komponente toast) samodejno objavijo bralniki zaslona, ne da bi bilo treba premakniti fokus uporabnika ali kako drugače prekiniti uporabnika. Poleg tega vključite, aria-atomic="true"da zagotovite, da je celotna zdravica vedno objavljena kot ena (atomska) enota, namesto da bi samo objavili, kaj je bilo spremenjeno (kar lahko povzroči težave, če posodobite samo del vsebine zdravice ali če prikazujete isto vsebino zdravice pozneje). Če so potrebne informacije pomembne za postopek, npr. za seznam napak v obrazcu, uporabite opozorilno komponentonamesto toasta.

Upoštevajte, da mora biti območje v živo prisotno v oznaki, preden se zdravica ustvari ali posodobi. Če dinamično ustvarite oba hkrati in ju vstavite na stran, ju podporne tehnologije na splošno ne bodo objavile.

Prav tako morate prilagoditi rolein aria-liveraven glede na vsebino. Če gre za pomembno sporočilo, kot je napaka, uporabite role="alert" aria-live="assertive", drugače uporabite role="status" aria-live="polite"atribute.

Ko se vsebina, ki jo prikazujete, spreminja, ne pozabite posodobiti delayčasovne omejitve , da bodo imeli uporabniki dovolj časa za branje zdravice.

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

Ko uporabljate autohide: false, morate dodati gumb za zapiranje, da uporabnikom omogočite opustitev zdravice.

Pozdravljen, svet! To je sporočilo 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>

Čeprav je tehnično mogoče dodati kontrolnike, ki jih je mogoče izostriti/ukrepati (kot so dodatni gumbi ali povezave), v zdravico, se tega izogibajte pri samodejnem skrivanju zdravic. Tudi če zdravici daste dolgo delayčasovno omejitev , bodo uporabniki tipkovnice in podporne tehnologije morda težko dosegli zdravico pravočasno za ukrepanje (ker zdravice ne prejmejo fokusa, ko so prikazane). Če nujno potrebujete dodatne kontrole, priporočamo, da uporabite toast z autohide: false.

Sass

Spremenljivke

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

Uporaba

Inicializiraj zdravice prek JavaScripta:

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

Sprožilci

Odpustitev je mogoče doseči z dataatributom na gumbu znotraj zdravice , kot je prikazano spodaj:

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

ali na gumb zunaj toast z uporabo, data-bs-targetkot je prikazano spodaj:

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-bs-, kot v data-bs-animation="".

Ime	Vrsta	Privzeto	Opis
`animation`	logično	`true`	Uporabite prehod CSS za bledenje na toast
`autohide`	logično	`true`	Samodejno skrij toast
`delay`	število	`5000`	Zakasnitev skrivanja zdravice (ms)

Metode

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij si oglejte našo dokumentacijo JavaScript .

pokazati

Razkrije toast elementa. Vrne se klicatelju, preden je zdravica dejansko prikazana (tj. preden shown.bs.toastpride do dogodka). To metodo morate poklicati ročno, namesto tega se vaš toast ne bo prikazal.

toast.show()

skriti

Skrije toast elementa. Vrne se klicatelju, preden je zdravica dejansko skrita (tj. preden hidden.bs.toastpride do dogodka). To metodo morate poklicati ročno, če ste jo autohidenaredili false.

toast.hide()

odstraniti

Skrije toast elementa. Vaš toast bo ostal v DOM-u, vendar ne bo več prikazan.

toast.dispose()

getInstance

Statična metoda, ki vam omogoča, da dobite primerek zdravice, povezan z elementom DOM

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

getOrCreateInstance

Statična metoda, ki vam omogoča, da dobite primerek zdravice, povezan z elementom DOM, ali ustvarite novega, če ni bil inicializiran

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

Dogodki

Vrsta dogodka	Opis
`show.bs.toast`	Ta dogodek se sproži takoj, ko `show`se pokliče metoda primerka.
`shown.bs.toast`	Ta dogodek se sproži, ko je zdravica vidna uporabniku.
`hide.bs.toast`	Ta dogodek se sproži takoj, ko `hide`je bila poklicana metoda primerka.
`hidden.bs.toast`	Ta dogodek se sproži, ko zdravica ni več skrita pred uporabnikom.

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