Treci la conținutul principal Treceți la navigarea documentelor
Check
in English

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.

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>
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 nu mai este necesar acum. 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.

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

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

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const 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.

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>

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

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>

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.

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>

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

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>

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 .text-bg-primaryla .toast, și apoi am adăugat .btn-close-whitela butonul nostru de închidere. Pentru o margine clară, eliminăm chenarul implicit cu .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>

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

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

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>

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

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>

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.

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>

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 pâine prăjită 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.

CSS

Variabile

Adăugat în v5.2.0

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, toasturile folosesc acum variabile CSS locale activate .toastpentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

  --#{$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};

Variabile Sass

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

Utilizare

Inițializați toasturile prin JavaScript:

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

Deoarece opțiunile pot fi transmise prin atribute de date sau JavaScript, puteți adăuga un nume de opțiune la data-bs-, ca în data-bs-animation="{value}". Asigurați-vă că schimbați tipul de caz al numelui opțiunii din „ camelCase ” în „ kebab-case ” atunci când treceți opțiunile prin atributele de date. De exemplu, utilizați data-bs-custom-class="beautifier"în loc de data-bs-customClass="beautifier".

Începând cu Bootstrap 5.2.0, toate componentele acceptă un atribut de date rezervat experimentaldata-bs-config care poate găzdui configurarea simplă a componentelor ca șir JSON. Când un element are data-bs-config='{"delay":0, "title":123}'și data-bs-title="456"atribute, valoarea finală titleva fi 456și atributele de date separate vor înlocui valorile date pe data-bs-config. În plus, atributele de date existente pot găzdui valori JSON precum data-bs-delay='{"show":0,"hide":150}'.

Nume Tip Mod implicit Descriere
animation boolean true Aplicați o tranziție de estompare CSS pe toast.
autohide boolean true Ascundeți automat pâinea prăjită după întârziere.
delay număr 5000 Întârziere în milisecunde înainte de a ascunde pâinea prăjită.

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 .

Metodă Descriere
dispose Ascunde toast-ul unui element. Toast-ul tău va rămâne pe DOM, dar nu se va mai afișa.
getInstance Metodă statică care vă permite să obțineți instanța toast asociată cu un element DOM.
De exemplu: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)returnează o instanță Bootstrap toast.
getOrCreateInstance Metodă statică care vă permite să obțineți instanța toast asociată cu un element DOM sau să creați unul nou, în cazul în care nu a fost inițializat.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Returnează o instanță de toast Bootstrap.
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.
isShown Returnează un boolean în funcție de starea de vizibilitate a 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.

Evenimente

Eveniment Descriere
hide.bs.toast Acest eveniment este declanșat imediat când hidemetoda instanței a fost apelată.
hidden.bs.toast Acest eveniment este declanșat când toast-ul a terminat de a fi ascuns utilizatorului.
show.bs.toast Acest eveniment se declanșează imediat când showeste apelată metoda instanței.
shown.bs.toast Acest eveniment este declanșat atunci când toast-ul a fost făcut vizibil pentru utilizator. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})