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.

Na této straně

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.

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

Ahoj světe! Toto je přípitková zpráva.

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

Dříve naše skripty dynamicky přidávaly .hidetřídu, aby úplně skryly přípitek (s display:none, spíše než jen s opacity:0). Nyní to již není nutné. Kvůli zpětné kompatibilitě však bude náš skript nadále přepínat třídu (i když to není prakticky potřeba) až do další hlavní verze.

Živý příklad

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

Hello, world! This is a toast message.

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

Ke spuštění živé ukázky přípitku používáme následující JavaScript:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Průsvitný

Tousty jsou lehce průsvitné, aby splynuly s tím, co je pod nimi.

Ahoj světe! Toto je přípitková zpráva.

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

Vidět? Prostě takhle.

Pozor, toasty se automaticky složí

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

Ahoj světe! Toto je přípitková zpráva.

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

Ahoj světe! Toto je přípitková zpráva.

<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-primarya .text-whitedo .toast, a poté přidali .btn-close-whitedo našeho tlačítka Zavřít. Pro ostrý okraj odstraníme výchozí ohraničení pomocí .border-0.

Ahoj světe! Toto je přípitková zpráva.

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

Ahoj světe! Toto je přípitková zpráva.

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

Vidět? Prostě takhle.

Pozor, toasty se automaticky složí

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

Ahoj světe! Toto je přípitková zpráva.

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

Ahoj světe! Toto je přípitková zpráva.

<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($black, .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($black, .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)
})

Spouštěče

Propuštění lze dosáhnout pomocí dataatributu na tlačítku v rámci toastu , jak je ukázáno níže:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

nebo na tlačítku mimo toast pomocí data-bs-targetníže uvedeného:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

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 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.toastudá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.toastudálosti). Pokud jste provedli , musíte tuto metodu zavolat autohideruč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 toastu spojenou s prvkem 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 instanci toastu přidruženou k prvku 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ž skončí skrytí toastu před uživatelem.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})