Posílejte svým návštěvníkům upozornění pomocí přípitku, lehké a snadno přizpůsobitelné výstražné zprávy.
Toasty jsou lehká oznámení navržená tak, aby napodobovala oznámení push, která byla popularizována mobilními a stolními operačními systémy. Jsou vyrobeny z flexboxu, takže je lze snadno zarovnat a umístit.
Toasty jsou z výkonnostních důvodů povoleny, takže je musíte inicializovat sami .
Pokud nezadáte , toasty se automaticky skryjí autohide: false.
Příklady
Základní
Chcete-li podpořit roztažitelné a předvídatelné toasty, doporučujeme hlavičku a tělo. Toastové hlavičky používají display: flex, což umožňuje snadné zarovnání obsahu díky našim utilitám margin a flexbox.
Toasty jsou tak flexibilní, jak potřebujete, a mají velmi malé požadované označení. Minimálně požadujeme, aby jeden prvek obsahoval váš „opečený“ obsah, a důrazně doporučujeme tlačítko pro zrušení.
Bootstrap
před 11 minutami
Ahoj světe! Toto je přípitková zpráva.
Průsvitný
Toasty jsou také mírně průsvitné, takže se prolínají se vším, nad čím by se mohly objevit. U prohlížečů, které podporují vlastnost backdrop-filterCSS, se také pokusíme rozmazat prvky pod toastem.
Bootstrap
před 11 minutami
Ahoj světe! Toto je přípitková zpráva.
Stohování
Když máte více toastů, ve výchozím nastavení je vertikálně skládáme tak, aby byly čitelné.
Bootstrap
právě teď
Vidět? Prostě takhle.
Bootstrap
před 2 sekundami
Pozor, toasty se automaticky složí
Umístění
Umístěte toasty s vlastními CSS, jak je potřebujete. Vpravo nahoře se často používá pro upozornění, stejně jako uprostřed nahoře. Pokud budete vždy zobrazovat pouze jeden přípitek najednou, umístěte styly umístění přímo na .toast.
Bootstrap
před 11 minutami
Ahoj světe! Toto je přípitková zpráva.
U systémů, které generují více oznámení, zvažte použití obtékajícího prvku, aby se mohly snadno skládat.
Bootstrap
právě teď
Vidět? Prostě takhle.
Bootstrap
před 2 sekundami
Pozor, toasty se automaticky složí
Můžete také získat fantazii s nástroji flexbox pro horizontální a/nebo vertikální zarovnání toastů.
Bootstrap
před 11 minutami
Ahoj světe! Toto je přípitková zpráva.
Přístupnost
Toasty mají být malým přerušením pro vaše návštěvníky nebo uživatele, takže abyste pomohli uživatelům se čtečkami obrazovky a podobnými pomocnými technologiemi, měli byste své toasty zabalit do aria-liveoblasti . Změny v živých oblastech (jako je vložení/aktualizace toastové komponenty) jsou automaticky oznámeny čtečkami obrazovky, aniž by bylo nutné přesunout pozornost uživatele nebo uživatele jinak přerušit. Kromě toho zahrňte, aria-atomic="true"abyste zajistili, že celý toast bude vždy ohlášen jako jedna (atomová) jednotka, nikoli oznámení toho, co bylo změněno (což by mohlo vést k problémům, pokud aktualizujete pouze část obsahu toastu nebo pokud zobrazíte stejný obsah toastu na v pozdějším okamžiku). Pokud jsou potřebné informace důležité pro proces, např. pro seznam chyb ve formuláři, použijte komponentu výstrahymísto toastu.
Pamatujte, že před vygenerováním nebo aktualizací toastu musí být v označení přítomna živá oblast . Pokud dynamicky vygenerujete oba současně a vložíte je do stránky, nebudou obecně oznámeny asistenčními technologiemi.
Musíte také přizpůsobit úroveň rolea aria-livev závislosti na obsahu. Pokud se jedná o důležitou zprávu, jako je chyba, použijte role="alert" aria-live="assertive", jinak použijte role="status" aria-live="polite"atributy.
Jak se obsah, který zobrazujete, mění, nezapomeňte aktualizovat delayčasový limit , aby měli lidé dostatek času si přípitek přečíst.
Při použití autohide: false, musíte přidat tlačítko pro zavření, aby uživatelé mohli toast odmítnout.
Bootstrap
před 11 minutami
Ahoj světe! Toto je přípitková zpráva.
Chování JavaScriptu
Používání
Inicializujte toasty pomocí JavaScriptu:
Možnosti
Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-animation="".
název
Typ
Výchozí
Popis
animace
booleovský
skutečný
Aplikujte na toast přechod CSS fade
automatické skrytí
booleovský
skutečný
Automaticky skrýt toast
zpoždění
číslo
500
Zpoždění skrytí toastu (ms)
Metody
Asynchronní metody a přechody
Všechny metody API jsou asynchronní a zahajují přechod . Vrátí se k volajícímu, jakmile je přechod zahájen, ale ještě před jeho ukončením . Kromě toho bude ignorováno volání metody na přechodové komponentě .
Odhalí přípitek prvku. Vrátí se k volajícímu před tím, než byl přípitek skutečně ukázán (tj. než dojde k shown.bs.toastudálosti). Tuto metodu musíte zavolat ručně, místo toho se váš toast nezobrazí.
.toast('hide')
Skryje toast prvku. Vrátí se k volajícímu dříve, než byl přípitek skutečně skryt (tj. než dojde k hidden.bs.toastudálosti). Pokud jste provedli , musíte tuto metodu zavolat autohideručně false.
.toast('dispose')
Skryje toast prvku. Váš toast zůstane na DOM, ale už se nebude zobrazovat.
Události
Typ události
Popis
show.bs.toast
Tato událost se spustí okamžitě při showvolání metody instance.
zobrazený.bs.toast
Tato událost se spustí, když je přípitek viditelný pro uživatele.
skrýt.bs.toast
Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý.bs.toast
Tato událost se spustí, když je přípitek skryt před uživatelem.