Source

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:

  • Pokud vytváříte náš JavaScript ze zdroje, vyžadujeutil.js .
  • Toasty jsou z výkonnostních důvodů povoleny, takže je musíte inicializovat sami .
  • Vezměte prosím na vědomí, že jste zodpovědní za umístění toastů.
  • Pokud nezadáte , toasty se automaticky skryjí autohide: false.

Efekt animace této komponenty závisí na prefers-reduced-motiondotazu 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 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>

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.

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

Stohování

Když máte více toastů, ve výchozím nastavení je ukládáme vertikálně tak, aby byly čitelné.

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

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

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

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.

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

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

Chování JavaScriptu

Používání

Inicializujte toasty pomocí JavaScriptu:

$('.toast').toast(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-, 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 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 .

$().toast(options)

Připojí obslužný program toastu ke kolekci prvků.

.toast('show')

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

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

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

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

.toast('dispose')

Skryje toast prvku. Váš toast zůstane na DOM, ale už se nebude zobrazovat.

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

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.
schovat.bs.toast Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý.bs.toast Tato událost se spustí, když skončí skrytí toastu před uživatelem. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})