Toasts

Push notifikaasjes nei jo besikers mei in toast, in lichtgewicht en maklik oanpasber warskôgingsberjocht.

Op dizze side

Toasts binne lichtgewicht notifikaasjes ûntworpen om de push-notifikaasjes te mimikjen dy't populêr binne troch mobile en buroblêdbestjoeringssystemen. Se binne boud mei flexbox, sadat se maklik binne te rjochtsjen en te pleatsen.

Oersicht

Dingen om te witten by it brûken fan de toast-plugin:

Toasts binne opt-in foar prestaasjes redenen, dus jo moatte se sels inisjalisearje .
Toasts sille automatysk ferbergje as jo net spesifisearje autohide: false.

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Foarbylden

Basic

Foar in stimulearjen útwreide en foarsisber toasts, Wy riede in koptekst en lichem. Toast-headers brûke display: flex, wêrtroch maklike ôfstimming fan ynhâld mooglik is troch ús marzje- en flexbox-helpprogramma's.

Toasts binne sa fleksibel as jo nedich binne en hawwe heul lyts fereaske markup. Wy fereaskje op syn minst ien elemint om jo "toasted" ynhâld te befetsjen en in ûntslachknop sterk oan te moedigjen.

Hallo wrâld! Dit is in toast berjocht.

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>

Earder hawwe ús skripts de .hideklasse dynamysk tafoege om in toast folslein te ferbergjen (mei display:none, yn stee fan allinich mei opacity:0). Dit is no net mear nedich. Foar efterútkompatibiliteit sil ús skript lykwols trochgean mei it wikseljen fan de klasse (ek al is d'r gjin praktyske ferlet fan) oant de folgjende grutte ferzje.

Live foarbyld

Klikje op de knop hjirûnder om in toast sjen te litten (gepositioneerd mei ús nutsbedriuwen yn 'e rjochter ûnderhoeke) dy't standert ferburgen is.

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>

Wy brûke it folgjende JavaScript om ús live toast-demo te triggerjen:

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

    toast.show()
  })
}

Trochsichtich

Toasten binne wat trochsichtich om te kombinearjen mei wat ûnder har is.

Hallo wrâld! Dit is in toast berjocht.

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>

Stacking

Jo kinne steapele toasts troch wrapping se yn in toast container, dat sil fertikaal tafoegje wat spacing.

Sjen? Krekt lykas dit.

Heads up, toast sil steapele automatysk

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>

Oanpaste ynhâld

Pas jo toasts oan troch subkomponinten te ferwiderjen, se oan te passen mei nutsbedriuwen , of troch jo eigen markup ta te foegjen. Hjir hawwe wy in ienfâldiger toast makke troch de standert te ferwiderjen .toast-header, in oanpaste hide-ikoan ta te foegjen fan Bootstrap Icons , en guon flexbox-helpprogramma's te brûken om de yndieling oan te passen.

Hallo wrâld! Dit is in toast berjocht.

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>

As alternatyf kinne jo ek ekstra kontrôles en komponinten tafoegje oan toasts.

Hallo wrâld! Dit is in toast berjocht.

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>

Kleurskema's

Bouwe op it boppesteande foarbyld, kinne jo ferskate toastkleurskema's meitsje mei ús kleur- en eftergrûnhelpprogramma 's. Hjir hawwe wy tafoege .text-bg-primaryoan de .toast, en dan tafoege .btn-close-whiteoan ús slute knop. Foar in skerpe râne, wy fuortsmite de standert grins mei .border-0.

Hallo wrâld! Dit is in toast berjocht.

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>

Pleatsing

Plak toasts mei oanpaste CSS as jo se nedich hawwe. Rjochts boppe wurdt faak brûkt foar notifikaasjes, lykas de boppeste midden. As jo mar ea sille sjen litte ien toast op in tiid, set de posisjonearring stilen rjocht op 'e .toast.

Hallo wrâld! Dit is in toast berjocht.

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>

Foar systemen dy't mear notifikaasjes generearje, beskôgje it brûken fan in wrappingselemint sadat se maklik kinne stapelje.

Sjen? Krekt lykas dit.

Heads up, toast sil steapele automatysk

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>

Jo kinne ek fancy wurde mei flexbox-hulpprogramma's om toasts horizontaal en / of fertikaal út te rjochtsjen.

Hallo wrâld! Dit is in toast berjocht.

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>

Tagonklikheid

Toasts binne bedoeld om lytse ûnderbrekkings te wêzen foar jo besikers of brûkers, dus om dy te helpen mei skermlêzers en ferlykbere assistinte technologyen, moatte jo jo toasts yn in aria-liveregio ynpakke . Feroarings yn libbensregio's (lykas it ynjeksje/bywurkjen fan in toastkomponint) wurde automatysk oankundige troch skermlêzers sûnder de fokus fan 'e brûker te ferpleatsen of de brûker oars te ûnderbrekken. Dêrneist omfetsje aria-atomic="true"om te soargjen dat de hiele toast altyd wurdt oankundige as ien (atomêre) ienheid, yn stee fan gewoan oan te kundigjen wat feroare is (wat kin liede ta problemen as jo mar in part fan 'e ynhâld fan' e toast bywurkje, of as jo deselde toastynhâld werjaan op in letter momint). As de needsaaklike ynformaasje wichtich is foar it proses, bygelyks foar in list mei flaters yn in formulier, brûk dan de warskôgingskomponintynstee fan toast.

Tink derom dat de live regio oanwêzich wêze moat yn 'e markearring foardat de toast wurdt generearre of bywurke. As jo dynamysk generearje beide tagelyk en ynjeksje se yn 'e side, se wurde oer it algemien net oankundige troch assistinte technologyen.

Jo moatte ek oanpasse de roleen aria-livenivo ôfhinklik fan de ynhâld. As it in wichtich berjocht is lykas in flater, brûk dan role="alert" aria-live="assertive", oars brûk role="status" aria-live="polite"attributen.

As de ynhâld dy't jo werjaan feroaret, wês wis dat jo de delaytime -out bywurkje , sadat brûkers genôch tiid hawwe om de toast te lêzen.

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

As jo brûke autohide: false, moatte jo in slute knop tafoegje om brûkers de toast te ferlitten.

Hallo wrâld! Dit is in toast berjocht.

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>

Hoewol it technysk mooglik is om fokusbere / aksjebere kontrôles (lykas ekstra knoppen of keppelings) yn jo toast ta te foegjen, moatte jo foarkomme dat jo dit dwaan foar autohiding toasts. Sels as jo de toast in lange delaytiid jouwe , kinne brûkers fan toetseboerd en assistinte technology it dreech fine om de toast op 'e tiid te berikken om aksje te nimmen (om't toasts gjin fokus krije as se werjûn wurde). As jo perfoarst moatte hawwe fierdere kontrôles, wy riede in gebrûk in toast mei autohide: false.

CSS

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap syn evoluearjende CSS fariabelen oanpak, toasts no brûke lokale CSS fariabelen op .toastfoar ferbettere real-time maatwurk. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

  --#{$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 fariabelen

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

Gebrûk

Inisjalisearje toasts fia JavaScript:

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

Triggers

Untslach kin berikt wurde mei it dataattribút op in knop binnen de toast lykas hjirûnder oantoand:

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

of op in knop bûten de toast mei de data-bs-targetlykas hjirûnder oanjûn:

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

Opsjes

As opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript, kinne jo in opsjenamme tafoegje oan data-bs-, lykas yn data-bs-animation="{value}". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan " camelCase " nei " kebab-case " as jo de opsjes trochjaan fia gegevensattributen. Brûk bygelyks data-bs-custom-class="beautifier"ynstee fan data-bs-customClass="beautifier".

Fanôf Bootstrap 5.2.0 stypje alle komponinten in eksperiminteel reservearre data-attribút data-bs-configdat ienfâldige komponintkonfiguraasje as in JSON-string kin herbergje. As in elemint hat data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"attributen, de definitive titlewearde sil wêze 456en de aparte gegevens attributen sille oerskriuwe wearden jûn op data-bs-config. Derneist kinne besteande gegevensattributen JSON-wearden lykas data-bs-delay='{"show":0,"hide":150}'.

Namme	Type	Standert	Beskriuwing
`animation`	boolean	`true`	Tapasse in CSS fade oergong nei de toast.
`autohide`	boolean	`true`	Ferbergje de toast automatysk nei de fertraging.
`delay`	nûmer	`5000`	Fertraging yn millisekonden foardat jo de toast ferbergje.

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

Metoade	Beskriuwing
`dispose`	Ferberget in elemint syn toast. Jo toast bliuwt op 'e DOM, mar sil net mear sjen.
`getInstance`	Statyske metoade wêrmei jo te krijen de toast eksimplaar assosjearre mei in DOM elemint. Bygelyks: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Jout in Bootstrap-toasteksimplaar werom.
`getOrCreateInstance`	Statyske metoade wêrmei jo de toasteksimplaar te krijen assosjearre mei in DOM-elemint, of in nij meitsje, yn gefal dat it net inisjalisearre is. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Jout in Bootstrap toast eksimplaar werom.
`hide`	Ferberget in elemint syn toast. Keart werom nei de beller foardat de toast eins ferburgen is (dus foardat it `hidden.bs.toast`evenemint bart). Jo moatte dizze metoade manuell neame as jo makke `autohide`hawwe `false`.
`isShown`	Jout in boolean werom neffens de sichtberens fan toast.
`show`	Bliuwt in elemint syn toast. Keart werom nei de beller foardat de toast eins is toand (dat wol sizze foardat it `shown.bs.toast`evenemint bart). Jo moatte dizze metoade manuell neame, ynstee sil jo toast net sjen.

Eveneminten

Barren	Beskriuwing
`hide.bs.toast`	Dit barren wurdt fuortendaliks ûntslein as de `hide`eksimplaarmetoade oanroppen is.
`hidden.bs.toast`	Dit evenemint wurdt ûntslein as de toast is klear mei in ferburgen fan de brûker.
`show.bs.toast`	Dit evenemint fjoer fuortendaliks as de `show`eksimplaar metoade wurdt oanroppen.
`shown.bs.toast`	Dit evenemint wurdt ûntslein as de toast is makke sichtber foar de brûker.

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