Source

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.

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

Translucid

Pâinea prăjită este, de asemenea, ușor translucide, așa că se amestecă peste orice ar putea apărea. Pentru browserele care acceptă backdrop-filterproprietatea CSS, vom încerca, de asemenea, să estompăm elementele sub un 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.

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

Bootstrap acum 11 minute
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 să se poată stivui cu ușurință.

<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 orizontal și/sau vertical.

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

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ă), în loc 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 pâine prăjită 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 pentru a vă asigura că oamenii au 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.

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

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 showeste 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 hidemetoda 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...
})