Pâine prăjită

Trimiteți notificări vizitatorilor dvs. cu un toast, un mesaj de alertă ușor și ușor de personalizat.

Toasturile sunt notificări ușoare concepute pentru a imita notificările push care au fost popularizate de sistemele de operare mobile și desktop. Sunt construite cu flexbox, astfel încât sunt ușor de aliniat și poziționat.

Prezentare generală

Lucruri de știut când utilizați pluginul toast:

Dacă construiți JavaScript din sursă, este nevoieutil.js de .
Toasturile sunt opt-in din motive de performanță, așa că trebuie să le inițializați singur .
Vă rugăm să rețineți că sunteți responsabil pentru poziționarea pâinii prăjite.
Pâinea prăjită se va ascunde automat dacă nu specificați autohide: false.

Efectul de animație al acestei componente depinde de prefers-reduced-motioninterogarea media. Consultați secțiunea cu mișcare redusă a documentației noastre de accesibilitate .

Exemple

De bază

Pentru a încuraja toasturile extensibile și previzibile, vă recomandăm un antet și un corp. Antetele Toast folosesc display: flex, permițând alinierea ușoară a conținutului datorită utilităților noastre marginale și flexbox.

Pâinele prăjite sunt la fel de flexibile pe cât aveți nevoie și au foarte puțin markup necesar. Cel puțin, solicităm un singur element pentru a conține conținutul dvs. „prăjit” și încurajăm cu tărie un buton de respingere.

Salut Lume! Acesta este un mesaj toast.

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

Trăi

Faceți clic pe butonul de mai jos pentru a afișa un toast (poziționat cu utilitățile noastre în colțul din dreapta jos) care a fost ascuns în mod implicit cu .hide.

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Translucid

Pâinele prăjite sunt ușor translucide pentru a se amesteca cu ceea ce este sub ele.

Salut Lume! Acesta este un mesaj toast.

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

Stivuire

Când aveți mai multe pâine prăjită, le stivuim în mod implicit pe verticală, într-un mod ușor de citit.

Vedea? La fel ca aceasta.

Atenție, toasturile se vor stivui automat

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

Plasarea

Puneți pâine prăjită cu CSS personalizat după cum aveți nevoie. Colțul din dreapta sus este adesea folosit pentru notificări, la fel ca partea din mijloc sus. Dacă veți arăta vreodată doar un toast la un moment dat, puneți stilurile de poziționare chiar pe .toast.

Salut Lume! Acesta este un mesaj toast.

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

Pentru sistemele care generează mai multe notificări, luați în considerare utilizarea unui element de împachetare, astfel încât acestea să se poată stivui cu ușurință.

Vedea? La fel ca aceasta.

Atenție, toasturile se vor stivui automat

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

Puteți, de asemenea, să vă faceți plăcere cu utilitățile flexbox pentru a alinia toasturile pe orizontală și/sau verticală.

Salut Lume! Acesta este un mesaj toast.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

Accesibilitate

Toasturile sunt destinate să fie mici întreruperi pentru vizitatorii sau utilizatorii dvs., așa că pentru a-i ajuta pe cei cu cititoare de ecran și tehnologii similare de asistență, ar trebui să vă înfășurați toasturile într-o aria-liveregiune . Modificările aduse regiunilor live (cum ar fi injectarea/actualizarea unei componente toast) sunt anunțate automat de cititoarele de ecran fără a fi nevoie să mutați focalizarea utilizatorului sau să îl întrerupeți în alt mod. În plus, includeți aria-atomic="true"pentru a vă asigura că întregul toast este întotdeauna anunțat ca o singură unitate (atomică), mai degrabă decât să anunțați ce a fost schimbat (ceea ce ar putea duce la probleme dacă actualizați doar o parte din conținutul pâinei sau dacă afișați același conținut de toast). la un moment ulterior în timp). Dacă informațiile necesare sunt importante pentru proces, de exemplu pentru o listă de erori într-un formular, atunci utilizați componenta de alertăîn loc de pâine prăjită.

Rețineți că regiunea live trebuie să fie prezentă în marcaj înainte ca toast-ul să fie generat sau actualizat. Dacă le generați dinamic pe ambele în același timp și le injectați în pagină, în general, acestea nu vor fi anunțate de tehnologiile de asistență.

De asemenea, trebuie să adaptați nivelul roleși aria-liveîn funcție de conținut. Dacă este un mesaj important, cum ar fi o eroare, utilizați role="alert" aria-live="assertive", în caz contrar folosiți role="status" aria-live="polite"atribute.

Pe măsură ce conținutul pe care îl afișați se modifică, asigurați-vă că actualizați timpul de delayexpirare , astfel încât utilizatorii să aibă suficient timp pentru a citi toast-ul.

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

Când utilizați autohide: false, trebuie să adăugați un buton de închidere pentru a permite utilizatorilor să îndepărteze toast-ul.

Salut Lume! Acesta este un mesaj toast.

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

Deși din punct de vedere tehnic este posibil să adăugați controale focalizabile/acționabile (cum ar fi butoane sau link-uri suplimentare) în toast, ar trebui să evitați să faceți acest lucru pentru ascunderea automată a toast-urilor. Chiar dacă acordați paine prăjită o perioadă lungă de delaytimp , utilizatorii de tastatură și tehnologie de asistență pot avea dificultăți să ajungă la toast la timp pentru a lua măsuri (deoarece toasturile nu primesc focalizare atunci când sunt afișate). Dacă neapărat trebuie să aveți controale suplimentare, vă recomandăm să utilizați un pâine prăjită cu autohide: false.

Comportamentul JavaScript

Utilizare

Inițializați toasturile prin JavaScript:

$('.toast').toast(option)

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-animation="".

Nume	Tip	Mod implicit	Descriere
animaţie	boolean	Adevărat	Aplicați o tranziție de estompare CSS pe toast
ascundere automată	boolean	Adevărat	Ascunde automat toast-ul
întârziere	număr	`500`	Întârziere ascunderea toast-ului (ms)

Metode

Metode și tranziții asincrone

Toate metodele API sunt asincrone și încep o tranziție . Ei revin la apelant imediat ce tranziția este începută, dar înainte ca aceasta să se încheie . În plus, un apel de metodă pentru o componentă de tranziție va fi ignorat .

Consultați documentația noastră JavaScript pentru mai multe informații .

`$().toast(options)`

Atașează un handler de pâine prăjită la o colecție de elemente.

`.toast('show')`

Dezvăluie toastul unui element. Se întoarce la apelant înainte ca toast-ul să fie afișat efectiv (adică înainte de apariția shown.bs.toastevenimentului). Trebuie să apelați manual această metodă, în schimb toast-ul nu se va afișa.

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

`.toast('hide')`

Ascunde toast-ul unui element. Se întoarce la apelant înainte ca toast-ul să fi fost efectiv ascuns (adică înainte de apariția hidden.bs.toastevenimentului). Trebuie să apelați manual această metodă dacă ați făcut autohidela false.

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

`.toast('dispose')`

Ascunde toast-ul unui element. Toast-ul tău va rămâne pe DOM, dar nu se va mai afișa.

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

Evenimente

Tip de eveniment	Descriere
show.bs.toast	Acest eveniment se declanșează imediat când `show`este apelată metoda instanței.
arătat.bs.toast	Acest eveniment este declanșat atunci când toast-ul a fost făcut vizibil pentru utilizator.
ascunde.bs.toast	Acest eveniment este declanșat imediat când `hide`metoda instanței a fost apelată.
ascuns.bs.toast	Acest eveniment este declanșat când toast-ul a terminat de a fi ascuns utilizatorului.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})