Toasty
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.
Přehled
Co byste měli vědět při používání pluginu toast:
- 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
.
prefers-reduced-motion
dotazu na média. Podívejte se na
část s omezeným pohybem v naší dokumentaci přístupnosti .
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í.
<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>
Žít
Kliknutím na tlačítko níže zobrazíte toast (umístěný s našimi nástroji v pravém dolním rohu), který byl ve výchozím nastavení skrytý pomocí .hide
.
<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 hide" 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>
Průsvitný
Tousty jsou lehce průsvitné, aby splynuly s tím, co je pod nimi.
<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>
Stohování
Toasty můžete naskládat tak, že je zabalíte do nádoby na toasty, která svisle přidá určitý prostor.
<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>
Vlastní obsah
Přizpůsobte si toasty odebráním dílčích komponent, jejich vyladěním pomocí nástrojů nebo přidáním vlastního označení. Zde jsme vytvořili jednodušší přípitek odstraněním výchozího .toast-header
, přidáním vlastní ikony skrytí z Bootstrap Icons a použitím některých nástrojů flexboxu k úpravě rozvržení.
<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>
Případně můžete k toastům přidat další ovládací prvky a komponenty.
<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>
Barevná schémata
Na základě výše uvedeného příkladu můžete pomocí našich nástrojů pro barvy a pozadí vytvořit různá barevná schémata toastů. Zde jsme přidali .bg-primary
a .text-white
do .toast
, a poté přidali .btn-close-white
do našeho tlačítka Zavřít. Pro ostrý okraj odstraníme výchozí ohraničení pomocí .border-0
.
<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>
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
.
<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>
U systémů, které generují více oznámení, zvažte použití obtékajícího prvku, aby se mohly snadno skládat.
<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>
Můžete také získat fantazii s nástroji flexbox pro horizontální a/nebo vertikální zarovnání toastů.
<!-- 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>
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-live
oblasti . 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 oznámen jako jedna (atomová) jednotka, nikoli pouze 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 zobrazujete stejný obsah toastu 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ň role
a aria-live
v 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 uživatelé dostatek času si toast přečíst.
<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>
Při použití autohide: false
, musíte přidat tlačítko pro zavření, aby uživatelé mohli toast odmítnout.
<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>
I když je technicky možné do toastu přidat zaostřitelné/použitelné ovládací prvky (jako jsou další tlačítka nebo odkazy), měli byste se tomu vyhnout u automatického skrývání toastů. I když dáte toastu dlouhý delay
časový limit , uživatelé klávesnice a asistenčních technologií mohou mít potíže s dosažením toastu včas, aby mohli zasáhnout (protože toasty nejsou zaostřené, když jsou zobrazeny). Pokud nezbytně musíte mít další ovládací prvky, doporučujeme použít toast s autohide: false
.
Sass
Proměnné
$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(0, 0, 0, .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(0, 0, 0, .05);
Používání
Inicializujte toasty pomocí JavaScriptu:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
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-bs-
, jako v data-bs-animation=""
.
název | Typ | Výchozí | Popis |
---|---|---|---|
animation |
booleovský | true |
Aplikujte na toast přechod CSS fade |
autohide |
booleovský | true |
Automaticky skrýt toast |
delay |
číslo | 5000 |
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ě .
Další informace naleznete v naší dokumentaci k JavaScriptu .
ukázat
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.toast
události). Tuto metodu musíte zavolat ručně, místo toho se váš toast nezobrazí.
toast.show()
skrýt
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.toast
události). Pokud jste provedli , musíte tuto metodu zavolat autohide
ručně false
.
toast.hide()
zlikvidovat
Skryje toast prvku. Váš toast zůstane na DOM, ale už se nebude zobrazovat.
toast.dispose()
getInstance
Statická metoda, která vám umožní získat instanci scrollspy přidruženou k prvku DOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
Statická metoda, která vám umožní získat scrollspy instanci spojenou s prvkem DOM nebo vytvořit novou v případě, že nebyla inicializována
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Události
Typ události | Popis |
---|---|
show.bs.toast |
Tato událost se spustí okamžitě při show volání metody instance. |
shown.bs.toast |
Tato událost se spustí, když je přípitek viditelný pro uživatele. |
hide.bs.toast |
Tato událost se spustí okamžitě po hide zavolání metody instance. |
hidden.bs.toast |
Tato událost se spustí, když je přípitek skryt před uživatelem. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})