Přejít na hlavní obsah Přejít na navigaci v dokumentech
Check
in English

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

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

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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:

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

    toast.show()
  })
}

Průsvitný

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

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

html 
<div class="toast-container position-static">
  <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í.

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

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

html 
<div class="toast align-items-center text-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.

Bootstrap před 11 minutami
Ahoj světe! Toto je přípitková zpráva.
html 
<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 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.

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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ů.

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

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

CSS

Proměnné

Přidáno ve verzi 5.2.0

Jako součást vyvíjejícího se přístupu Bootstrap proměnných CSS, toasty nyní používají místní proměnné CSS .toastpro lepší přizpůsobení v reálném čase. Hodnoty pro proměnné CSS se nastavují prostřednictvím Sass, takže přizpůsobení Sass je stále podporováno.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

Protože volby lze předávat prostřednictvím datových atributů nebo JavaScriptu, můžete přidat název volby k data-bs-, jako v data-bs-animation="{value}". Při předávání možností prostřednictvím datových atributů se ujistěte, že jste změnili typ případu názvu možnosti z „ camelCase “ na „ kebab-case “. Použijte například data-bs-custom-class="beautifier"místo data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všechny komponenty podporují experimentální atribut vyhrazených dat data-bs-config, který může obsahovat jednoduchou konfiguraci komponenty jako řetězec JSON. Když má prvek atributy data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné datové atributy přepíší hodnoty uvedené na data-bs-config. Kromě toho mohou existující datové atributy obsahovat hodnoty JSON, jako je data-bs-delay='{"show":0,"hide":150}'.

název Typ Výchozí Popis
animation booleovský true Aplikujte na toast přechod CSS fade.
autohide booleovský true Automaticky skryjte toast po odložení.
delay číslo 5000 Zpoždění v milisekundách před skrytím toastu.

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 .

Metoda Popis
dispose Skryje toast prvku. Váš toast zůstane na DOM, ale už se nebude zobrazovat.
getInstance Statická metoda, která vám umožní získat instanci toastu spojenou s prvkem DOM.
Například: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Vrátí instanci toastu Bootstrap.
getOrCreateInstance Statická metoda, která vám umožní získat instanci toastu spojenou s prvkem DOM nebo vytvořit novou, v případě, že nebyla inicializována.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Vrátí instanci toastu Bootstrap.
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.
isShown Vrátí boolean podle stavu viditelnosti toastu.
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í.

Události

událost Popis
hide.bs.toast Tato událost se spustí okamžitě po hidezavolání metody instance.
hidden.bs.toast Tato událost se spustí, když skončí skrytí toastu před uživatelem.
show.bs.toast Tato událost se spustí okamžitě při showvolání metody instance.
shown.bs.toast Tato událost se spustí, když je přípitek viditelný pro uživatele. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})