Source

Zdravice

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

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:

  • Če gradite naš JavaScript iz izvorne kode, zahtevautil.js .
  • Zdravice so opt-in zaradi učinkovitosti, zato jih morate inicializirati sami .
  • Upoštevajte, da ste odgovorni za pozicioniranje toastov.
  • 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.

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

Prosojno

Tudi toasti so rahlo prosojni, tako da se zlijejo čez vse, na čemer se lahko pojavijo. Pri brskalnikih, ki podpirajo backdrop-filterlastnost CSS, bomo poskušali tudi zamegliti elemente pod toastom.

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

Zlaganje

Ko imate več toastov, jih privzeto zložimo navpično na berljiv 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>

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.

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

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

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

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-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>

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 objavili, kaj je bilo spremenjeno (kar lahko povzroči težave, če posodobite samo del vsebine zdravice ali če prikažete isto vsebino zdravice na poznejši čas). Č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 zagotovite ljudem dovolj časa za branje zdravice.

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

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

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

obnašanje JavaScripta

Uporaba

Inicializiraj zdravice prek JavaScripta:

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

Opcije

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

Ime Vrsta Privzeto Opis
animacija logično prav Uporabite prehod CSS za bledenje na toast
samodejno skrij logično prav Samodejno skrij toast
zamuda število 500 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 .

$().toast(options)

Zbirki elementov priloži obravnavo toastov.

.toast('show')

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.

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

.toast('hide')

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.

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

.toast('dispose')

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

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

Dogodki

Vrsta dogodka Opis
show.bs.toast Ta dogodek se sproži takoj, ko showse pokliče metoda primerka.
prikazano.bs.toast Ta dogodek se sproži, ko je zdravica vidna uporabniku.
hide.bs.toast Ta dogodek se sproži takoj, ko hideje bila poklicana metoda primerka.
hidden.bs.toast Ta dogodek se sproži, ko zdravica ni več skrita pred uporabnikom. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})