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žaduje
util.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-motion
mediá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.
Priesvitný
Toasty sú tiež mierne priesvitné, takže splývajú so všetkým, nad čím sa môžu objaviť. Pre prehliadače, ktoré podporujú vlastnosť backdrop-filter
CSS, sa tiež pokúsime rozmazať prvky pod toastom.
Stohovanie
Ak máte viacero toastov, predvolene ich ukladáme zvisle tak, aby boli čitateľné.
Umiestnenie
Umiestnite toasty s vlastným CSS podľa potreby. Vpravo hore sa často používa na upozornenia, rovnako ako stred hore. Ak sa niekedy chystáte ukázať iba jeden toast naraz, umiestnite štýly umiestnenia priamo na .toast
.
V prípade systémov, ktoré generujú viac upozornení, zvážte použitie baliaceho prvku, aby sa dali ľahko stohovať.
Môžete tiež získať fantáziu s nástrojmi flexbox na zarovnanie toastov horizontálne a / alebo vertikálne.
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-live
oblasti . Zmeny v živých 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 inak prerušiť používateľa. Okrem toho zahrňte, aria-atomic="true"
aby ste zabezpečili, že celý toast bude vždy oznámený ako jedna (atómová) jednotka, a nie oznámenie toho, čo sa zmenilo (čo by mohlo viesť k problémom, ak aktualizujete iba časť obsahu toastu alebo ak rovnaký obsah toastu zobrazíte na neskorší časový bod). 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ň role
a aria-live
v 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 ľudia mali dostatok času na prečítanie prípitku.
Keď používate autohide: false
, musíte pridať tlačidlo na zatvorenie, aby používatelia mohli prípitok zrušiť.
Správanie JavaScriptu
Použitie
Inicializujte toasty cez JavaScript:
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é .
$().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.toast
nastane udalosť). Túto metódu musíte zavolať manuálne, namiesto toho sa váš toast nezobrazí.
.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.toast
dôjde k udalosti). Ak ste vykonali , musíte túto metódu zavolať autohide
manuálne false
.
.toast('dispose')
Skryje toast prvku. Váš toast zostane na DOM, ale už sa nebude zobrazovať.
Diania
Typ udalosti | Popis |
---|---|
show.bs.toast | Táto udalosť sa spustí okamžite po show zavolaní 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 hide zavolaní metódy inštancie. |
skrytý.bs.toast | Táto udalosť sa spustí, keď sa skončí skrytie prípitku pred používateľom. |