Toasty

Pošlite svojim návštevníkom upozornenia pomocou prípitku, ľahkej a ľahko prispôsobiteľnej výstražnej správy.

Na tejto stránke

Toasty sú ľahké upozornenia navrhnuté tak, aby napodobňovali upozornenia push, ktoré spopularizovali mobilné a stolné operačné systémy. Sú vyrobené s flexboxom, takže sa dajú ľahko zarovnať a umiestniť.

Prehľad

Čo by ste mali vedieť pri používaní doplnku toast:

Toasty sú aktivované z dôvodov výkonu, takže ich musíte inicializovať sami .
Ak nešpecifikujete, toasty sa automaticky skryjú autohide: false.

Animačný efekt tohto komponentu závisí od prefers-reduced-motionmediálneho dopytu. Pozrite si časť so zníženým pohybom v našej dokumentácii o prístupnosti .

Príklady

Základné

Na podporu roztiahnuteľných a predvídateľných toastov odporúčame hlavičku a telo. Toastové hlavičky používajú display: flex, čo umožňuje jednoduché zarovnanie obsahu vďaka našim obslužným programom margin a flexbox.

Toasty sú také flexibilné, ako potrebujete, a majú veľmi malú požadovanú značku. Minimálne požadujeme, aby jeden prvok obsahoval váš „opečený“ obsah a dôrazne odporúčame tlačidlo na zrušenie.

Ahoj svet! Toto je prípitková správa.

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>

Predtým naše skripty dynamicky pridávali .hidetriedu, aby úplne skryli prípitok (s display:none, a nie len s opacity:0). Teraz to už nie je potrebné. Avšak kvôli spätnej kompatibilite bude náš skript pokračovať v prepínaní triedy (aj keď to nie je prakticky potrebné) až do ďalšej hlavnej verzie.

Živý príklad

Kliknutím na tlačidlo nižšie zobrazíte toast (umiestnený s našimi pomôckami v pravom dolnom rohu), ktorý bol predvolene skrytý.

Hello, world! This is a toast message.

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

Na spustenie ukážky živého prípitku používame nasledujúci JavaScript:

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

    toast.show()
  })
}

Priesvitný

Toasty sú mierne priesvitné, aby splynuli s tým, čo je pod nimi.

Ahoj svet! Toto je prípitková správa.

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>

Stohovanie

Toasty môžete naskladať tak, že ich zabalíte do nádoby na hrianky, čím sa zvisle pridá určitý priestor.

Vidíš? Presne takto.

Pozor, toasty sa uložia automaticky

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

Prispôsobte si toasty odstránením čiastkových komponentov, ich vyladením pomocou nástrojov alebo pridaním vlastného označenia. Tu sme vytvorili jednoduchší prípitok odstránením predvoleného .toast-header, pridaním vlastnej ikony skrytia z Bootstrap Icons a použitím niektorých nástrojov flexboxu na úpravu rozloženia.

Ahoj svet! Toto je prípitková správa.

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>

Prípadne môžete k toastom pridať aj ďalšie ovládacie prvky a komponenty.

Ahoj svet! Toto je prípitková správa.

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>

Farebné schémy

Na základe vyššie uvedeného príkladu môžete vytvoriť rôzne farebné schémy toastov pomocou našich nástrojov pre farby a pozadie . Tu sme pridali .text-bg-primarydo .toasta potom pridali .btn-close-whitedo nášho tlačidla zavrieť. Pre ostrý okraj odstránime predvolený okraj pomocou .border-0.

Ahoj svet! Toto je prípitková správa.

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>

Umiestnenie

Umiestnite toasty s vlastným CSS podľa potreby. Pravá horná časť sa často používa na upozornenia, rovnako ako stredná horná časť. Ak sa niekedy chystáte ukázať iba jeden toast naraz, umiestnite štýly umiestnenia priamo na .toast.

Ahoj svet! Toto je prípitková sprá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>

V prípade systémov, ktoré generujú viac upozornení, zvážte použitie baliaceho prvku, aby sa dali ľahko stohovať.

Vidíš? Presne takto.

Pozor, toasty sa uložia automaticky

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 tiež získať fantáziu s nástrojmi flexbox na zarovnanie toastov horizontálne a / alebo vertikálne.

Ahoj svet! Toto je prípitková správa.

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>

Prístupnosť

Toasty sú určené na malé vyrušenia pre vašich návštevníkov alebo používateľov, takže ak chcete pomôcť používateľom s čítačkami obrazovky a podobnými pomocnými technológiami, mali by ste svoje toasty zabaliť do aria-liveoblasti . Zmeny v aktívnych oblastiach (ako je vstreknutie/aktualizácia toastového komponentu) sú automaticky oznámené čítačkami obrazovky bez toho, aby bolo potrebné presunúť pozornosť používateľa alebo ho inak prerušiť. Okrem toho zahrňte, aria-atomic="true"aby ste zabezpečili, že celý toast bude vždy ohlásený ako jedna (atómová) jednotka, a nie len to, čo sa zmenilo (čo by mohlo viesť k problémom, ak aktualizujete iba časť obsahu toastu alebo ak zobrazíte rovnaký obsah toastu. v neskoršom čase). Ak sú potrebné informácie dôležité pre proces, napr. pre zoznam chýb vo formulári, použite komponent výstrahynamiesto toastu.

Upozorňujeme, že pred vygenerovaním alebo aktualizáciou toastu musí byť v označení prítomná živá oblasť . Ak dynamicky vygenerujete oboje súčasne a vložíte ich na stránku, vo všeobecnosti nebudú oznámené asistenčnými technológiami.

Musíte tiež prispôsobiť úroveň rolea aria-livev závislosti od obsahu. Ak je to dôležitá správa, napríklad chyba, použite role="alert" aria-live="assertive", inak použite role="status" aria-live="polite"atribúty.

Keď sa obsah, ktorý zobrazujete, mení, nezabudnite aktualizovať delayčasový limit , aby mali používatelia dostatok času na prečítanie prípitku.

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

Keď používate autohide: false, musíte pridať tlačidlo na zatvorenie, aby používatelia mohli prípitok zrušiť.

Ahoj svet! Toto je prípitková správa.

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>

Aj keď je technicky možné do svojho toastu pridať zaostriteľné/funkčné ovládacie prvky (ako sú ďalšie tlačidlá alebo odkazy), mali by ste sa tomu vyhnúť v prípade automatického skrývania toastov. Aj keď dáte hrianke dlhý delayčasový limit , pre používateľov klávesnice a asistenčných technológií môže byť ťažké dosiahnuť hrianku včas, aby mohli konať (keďže toasty nie sú zaostrené, keď sú zobrazené). Ak nevyhnutne potrebujete ďalšie ovládacie prvky, odporúčame použiť hrianku s autohide: false.

CSS

Premenné

Pridané vo verzii 5.2.0

Ako súčasť vyvíjajúceho sa prístupu premenných CSS od Bootstrapu, toasty teraz používajú lokálne premenné CSS zapnuté .toastna vylepšené prispôsobenie v reálnom čase. Hodnoty pre premenné CSS sa nastavujú cez Sass, takže prispôsobenie Sass je stále podporované.

  --#{$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 premenné

$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žitie

Inicializujte toasty cez JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Spúšťače

Prepustenie je možné dosiahnuť pomocou dataatribútu na tlačidle v rámci toastu , ako je uvedené nižšie:

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

alebo na tlačidlo mimo toastu pomocou data-bs-targetnižšie uvedeného:

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

možnosti

Keďže možnosti možno odovzdať prostredníctvom atribútov údajov alebo jazyka JavaScript, môžete pridať názov možnosti k data-bs-, ako v data-bs-animation="{value}". Pri odovzdávaní možností cez atribúty údajov nezabudnite zmeniť typ prípadu názvu možnosti z „ camelCase “ na „ kebab-case “. Napríklad použite data-bs-custom-class="beautifier"namiesto data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všetky komponenty podporujú experimentálny atribút rezervovaných údajov data-bs-config, ktorý môže obsahovať jednoduchú konfiguráciu komponentu ako reťazec JSON. Ak má prvok atribúty data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné atribúty údajov prepíšu hodnoty uvedené na data-bs-config. Existujúce dátové atribúty môžu navyše obsahovať hodnoty JSON ako data-bs-delay='{"show":0,"hide":150}'.

názov	Typ	Predvolené	Popis
`animation`	boolovská hodnota	`true`	Na toast použite prechod zoslabovania CSS.
`autohide`	boolovská hodnota	`true`	Automaticky skryť toast po odložení.
`delay`	číslo	`5000`	Oneskorenie v milisekundách pred skrytím toastu.

Metódy

Asynchrónne metódy a prechody

Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .

Viac informácií nájdete v našej dokumentácii JavaScript .

Metóda	Popis
`dispose`	Skryje toast prvku. Váš toast zostane na DOM, ale už sa nebude zobrazovať.
`getInstance`	Statická metóda, ktorá vám umožňuje získať inštanciu toastu spojenú s prvkom DOM. Napríklad: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Vráti inštanciu toastu Bootstrap.
`getOrCreateInstance`	Statická metóda, ktorá vám umožňuje získať inštanciu toastu spojenú s prvkom DOM alebo vytvoriť novú, v prípade, že nebola inicializovaná. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Vráti inštanciu toastu Bootstrap.
`hide`	Skryje toast prvku. Vráti sa k volajúcemu skôr, ako bol prípitok skutočne skrytý (tj predtým, ako `hidden.bs.toast`dôjde k udalosti). Ak ste vykonali , musíte túto metódu zavolať `autohide`manuálne `false`.
`isShown`	Vráti boolovskú hodnotu podľa stavu viditeľnosti toastu.
`show`	Odhaľuje prípitok prvku. Vráti sa k volajúcemu predtým, ako sa toast skutočne ukázal (tj predtým, ako `shown.bs.toast`dôjde k udalosti). Túto metódu musíte zavolať manuálne, namiesto toho sa váš toast nezobrazí.

Diania

Udalosť	Popis
`hide.bs.toast`	Táto udalosť sa spustí okamžite po `hide`zavolaní metódy inštancie.
`hidden.bs.toast`	Táto udalosť sa spustí, keď sa skončí skrytie prípitku pred používateľom.
`show.bs.toast`	Táto udalosť sa spustí okamžite pri `show`volaní metódy inštancie.
`shown.bs.toast`	Táto udalosť sa spustí, keď je prípitok viditeľný pre používateľa.

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