Pâine prăjită

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

Pe aceasta pagina

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:

Toasturile sunt opt-in din motive de performanță, așa că trebuie să le inițializați singur .
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 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>

Anterior, scripturile noastre adăugau în mod dinamic .hideclasa pentru a ascunde complet un toast (cu display:none, mai degrabă decât doar cu opacity:0). Acest lucru acum nu mai este necesar. Cu toate acestea, pentru compatibilitate cu versiunea inversă, scriptul nostru va continua să comute clasa (chiar dacă nu este nevoie practic de aceasta) până la următoarea versiune majoră.

Exemplu viu

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.

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>

Folosim următorul JavaScript pentru a declanșa demonstrația noastră live toast:

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

    toast.show()
  })
}

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

Stivuire

Puteți stivui pâine prăjită împachetându-le într-un recipient pentru pâine prăjită, care va adăuga un spațiu pe verticală.

Vedea? La fel ca aceasta.

Atenție, toasturile se vor stivui automat

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

Conținut personalizat

Personalizați-vă prăjiturile prin eliminarea subcomponentelor, ajustându-le cu utilități sau adăugând propriul dvs. marcaj. Aici am creat un toast mai simplu prin eliminarea implicită .toast-header, adăugând o pictogramă de ascundere personalizată din Pictogramele Bootstrap și folosind unele utilitare flexbox pentru a ajusta aspectul.

Salut Lume! Acesta este un mesaj toast.

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

Alternativ, puteți adăuga, de asemenea, comenzi și componente suplimentare la prăjituri.

Salut Lume! Acesta este un mesaj toast.

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

Scheme de culori

Pe baza exemplului de mai sus, puteți crea diferite scheme de culori prăjite cu ajutorul utilităților noastre de culoare și fundal . Aici am adăugat .bg-primaryși .text-whitela .toast, și apoi am adăugat .btn-close-whitela butonul nostru de închidere. Pentru o margine clară, eliminăm chenarul implicit cu .border-0.

Salut Lume! Acesta este un mesaj toast.

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

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.

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

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

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

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). într-un moment ulterior). 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-bs-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-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>

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.

Sass

Variabile

$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);

Utilizare

Inițializați toasturile prin JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Declanșatoare

Demiterea poate fi realizată cu dataatributul de pe un buton din toast , așa cum se arată mai jos:

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

sau pe un buton din afara pâinei prăjite , folosind data-bs-targetașa cum se arată mai jos:

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

Opțiuni

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

Nume	Tip	Mod implicit	Descriere
`animation`	boolean	`true`	Aplicați o tranziție de estompare CSS pe toast
`autohide`	boolean	`true`	Ascunde automat toast-ul
`delay`	număr	`5000`	Î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 .

spectacol

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.

toast.show()

ascunde

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.

toast.hide()

dispune

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

toast.dispose()

getInstance

Metodă statică care vă permite să obțineți instanța toast asociată cu un element DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Metodă statică care vă permite să obțineți instanța de toast asociată cu un element DOM sau să creați una nouă în cazul în care nu a fost inițializată

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Evenimente

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

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