in English

Toasty

Pošlite svojim návštevníkom upozornenia pomocou prípitku, ľahkej a ľahko prispôsobiteľnej výstražnej správy.

Toasty sú ľahké upozornenia navrhnuté tak, aby napodobňovali upozornenia push, ktoré spopularizovali mobilné a stolné operačné systémy. Sú vyrobené s flexboxom, takže sa dajú ľahko zarovnať a umiestniť.

Prehľad

Čo by ste mali vedieť pri používaní doplnku toast:

  • Ak vytvárate náš JavaScript zo zdroja, vyžadujeutil.js .
  • Toasty sú aktivované z dôvodov výkonu, takže ich musíte inicializovať sami .
  • Upozorňujeme, že ste zodpovední za umiestnenie toastov.
  • Ak nešpecifikujete, toasty sa automaticky skryjú autohide: false.
Animačný efekt tohto komponentu závisí od prefers-reduced-motionmediálneho dopytu. Pozrite si časť so zníženým pohybom v našej dokumentácii o prístupnosti .

Príklady

Základné

Na podporu roztiahnuteľných a predvídateľných toastov odporúčame hlavičku a telo. Toastové hlavičky používajú display: flex, čo umožňuje jednoduché zarovnanie obsahu vďaka našim obslužným programom margin a flexbox.

Toasty sú také flexibilné, ako potrebujete, a majú veľmi malú požadovanú značku. Minimálne požadujeme, aby jeden prvok obsahoval váš „opečený“ obsah a dôrazne odporúčame tlačidlo na zrušenie.

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

Naživo

Kliknutím na tlačidlo nižšie zobrazíte toast (umiestnený s našimi pomôckami v pravom dolnom rohu), ktorý bol predvolene skrytý pomocou .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Priesvitný

Toasty sú mierne priesvitné, aby splynuli s tým, čo je pod nimi.

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

Stohovanie

Ak máte viacero toastov, predvolene ich ukladáme zvisle tak, aby boli čitateľné.

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

Umiestnenie

Umiestnite toasty s vlastným CSS podľa potreby. Pravá horná časť sa často používa na upozornenia, rovnako ako stredná horná časť. Ak sa niekedy chystáte ukázať iba jeden toast naraz, umiestnite štýly umiestnenia priamo na .toast.

Bootstrap pred 11 minútami
Ahoj svet! Toto je prípitková správa. 
<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>

V prípade systémov, ktoré generujú viac upozornení, zvážte použitie baliaceho prvku, aby sa dali ľahko stohovať.

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

Môžete tiež získať fantáziu s nástrojmi flexbox na zarovnanie toastov horizontálne a / alebo vertikálne.

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

Prístupnosť

Toasty sú určené na malé vyrušenia pre vašich návštevníkov alebo používateľov, takže ak chcete pomôcť používateľom s čítačkami obrazovky a podobnými pomocnými technológiami, mali by ste svoje toasty zabaliť do aria-liveoblasti . Zmeny v aktívnych oblastiach (ako je vstreknutie/aktualizácia toastového komponentu) sú automaticky oznámené čítačkami obrazovky bez toho, aby bolo potrebné presunúť pozornosť používateľa alebo ho inak prerušiť. Okrem toho zahrňte, aria-atomic="true"aby ste zabezpečili, že celý toast bude vždy ohlásený ako jedna (atómová) jednotka, a nie len to, čo sa zmenilo (čo by mohlo viesť k problémom, ak aktualizujete iba časť obsahu toastu alebo ak zobrazíte rovnaký obsah toastu. v neskoršom čase). Ak sú potrebné informácie dôležité pre proces, napr. pre zoznam chýb vo formulári, použite komponent výstrahynamiesto toastu.

Upozorňujeme, že pred vygenerovaním alebo aktualizáciou toastu musí byť v označení prítomná živá oblasť . Ak dynamicky vygenerujete oboje súčasne a vložíte ich na stránku, vo všeobecnosti nebudú oznámené asistenčnými technológiami.

Musíte tiež prispôsobiť úroveň rolea aria-livev závislosti od obsahu. Ak je to dôležitá správa, napríklad chyba, použite role="alert" aria-live="assertive", inak použite role="status" aria-live="polite"atribúty.

Keď sa obsah, ktorý zobrazujete, mení, nezabudnite aktualizovať delayčasový limit , aby mali používatelia dostatok času na prečítanie prípitku.

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

Keď používate autohide: false, musíte pridať tlačidlo na zatvorenie, aby používatelia mohli prípitok zrušiť.

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

Aj keď je technicky možné do svojho toastu pridať zaostriteľné/funkčné ovládacie prvky (ako sú ďalšie tlačidlá alebo odkazy), mali by ste sa tomu vyhnúť v prípade automatického skrývania toastov. Aj keď dáte hrianke dlhý delayčasový limit , pre používateľov klávesnice a asistenčných technológií môže byť ťažké dosiahnuť hrianku včas, aby mohli konať (keďže toasty nie sú zaostrené, keď sú zobrazené). Ak nevyhnutne potrebujete ďalšie ovládacie prvky, odporúčame použiť hrianku s autohide: false.

Správanie JavaScriptu

Použitie

Inicializujte toasty cez JavaScript:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-animation="".

názov Typ Predvolené Popis
animácie boolovská hodnota pravda Na toast použite prechod zoslabovania CSS
autohide boolovská hodnota pravda Automaticky skryť toast
meškanie číslo 500 Oneskorenie skrytia toastu (ms)

Metódy

Asynchrónne metódy a prechody

Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .

Viac informácií nájdete v našej dokumentácii JavaScript .

$().toast(options)

Pripája manipulátor toastov ku kolekcii prvkov.

.toast('show')

Odhaľuje prípitok prvku. Vráti sa k volajúcemu skôr, ako sa toast skutočne ukázal (tj predtým, ako shown.bs.toastnastane udalosť). Túto metódu musíte zavolať manuálne, namiesto toho sa váš toast nezobrazí.

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

.toast('hide')

Skryje toast prvku. Vráti sa k volajúcemu skôr, ako bol prípitok skutočne skrytý (tj predtým, ako hidden.bs.toastdôjde k udalosti). Ak ste vykonali , musíte túto metódu zavolať autohidemanuálne false.

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

.toast('dispose')

Skryje toast prvku. Váš toast zostane na DOM, ale už sa nebude zobrazovať.

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

Diania

Typ udalosti Popis
show.bs.toast Táto udalosť sa spustí okamžite po showzavolaní metódy inštancie.
zobrazený.bs.toast Táto udalosť sa spustí, keď je prípitok viditeľný pre používateľa.
skryť.bs.toast Táto udalosť sa spustí okamžite po hidezavolaní metódy inštancie.
skrytý.bs.toast Táto udalosť sa spustí, keď sa skončí skrytie prípitku pred používateľom. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})