Aqbeż għall-kontenut prinċipali Aqbeż għan-navigazzjoni tad-dokumenti
Check
in English

Toasts

Imbotta notifiki lill-viżitaturi tiegħek b'toast, messaġġ ta' twissija ħafif u faċilment customizable.

Fuq din il-paġna

It-toasts huma notifiki ħfief iddisinjati biex jimitaw in-notifiki push li ġew popolarizzati minn sistemi operattivi mobbli u desktop. Huma mibnija bil-flexbox, għalhekk huma faċli biex jallinjaw u jpoġġuhom.

Ħarsa ġenerali

Affarijiet li għandek tkun taf meta tuża l-plugin toast:

  • It-toasts huma opt-in għal raġunijiet ta' prestazzjoni, għalhekk trid tinizjalizzahom lilek innifsek .
  • It-toasts awtomatikament jaħbu jekk ma tispeċifikax autohide: false.
L-effett ta 'animazzjoni ta' dan il-komponent jiddependi fuq il prefers-reduced-motion-mistoqsija tal-midja. Ara t- taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .

Eżempji

Bażiku

Biex ninkoraġġixxu toasts estensibbli u prevedibbli, nirrakkomandaw header u body. L-intestaturi toast jużaw display: flex, li jippermettu allinjament faċli tal-kontenut grazzi għall-utilitajiet tal-marġni u l-flexbox tagħna.

It-toasts huma flessibbli kemm għandek bżonn u għandhom ftit li xejn markup meħtieġ. Bħala minimu, neħtieġu element wieħed li jkun fih il-kontenut "mixwi" tiegħek u nħeġġu bil-qawwa buttuna tkeċċi.

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>
Preċedentement, l-iskripts tagħna żiedu l- .hideklassi b'mod dinamiku biex jaħbu kompletament toast (bil- display:none, aktar milli sempliċement bil- opacity:0). Dan issa mhux meħtieġ aktar. Madankollu, għal kompatibilità b'lura, l-iskrittura tagħna se tkompli taqleb il-klassi (anke jekk m'hemm l-ebda ħtieġa prattika għaliha) sal-verżjoni ewlenija li jmiss.

Eżempju ħaj

Ikklikkja l-buttuna hawn taħt biex turi toast (pożizzjonat bl-utilitajiet tagħna fir-rokna t'isfel tal-lemin) li ġiet moħbija b'mod awtomatiku.

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

Aħna nużaw il-JavaScript li ġej biex niskattaw id-demo tal-toast live tagħna:

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

    toast.show()
  })
}

Trasluċidi

It-toasts huma kemmxejn trasluċidi biex jitħalltu ma 'dak li hemm taħthom.

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>

Stivar

Tista 'munzell toasts billi tgeżwirhom f'kontenitur toast, li vertikalment iżid ftit spazjar.

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>

Kontenut apposta

Ippersonalizza t-toasts tiegħek billi tneħħi s-sottokomponenti, tirranġahom b'utilitajiet , jew billi żżid il-markup tiegħek. Hawnhekk ħloqna toast aktar sempliċi billi neħħejna l-inadempjenza .toast-header, żidna ikona tal-ħbi tad-dwana minn Bootstrap Icons , u nużaw xi utilitajiet tal-flexbox biex taġġusta t-tqassim.

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>

Inkella, tista 'wkoll iżżid kontrolli u komponenti addizzjonali mat-toasts.

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>

Skemi tal-kulur

Filwaqt li tibni fuq l-eżempju t'hawn fuq, tista 'toħloq skemi ta' kuluri toast differenti bl- utilitajiet tal- kulur u l- isfond tagħna. Hawnhekk żidna .text-bg-primarymal- .toast, u mbagħad żidna .btn-close-whitemal-buttuna tal-qrib tagħna. Għal tarf iqarmeċ, inneħħu l-bord default b' .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>

Pjazzament

Poġġi toasts b'CSS tad-dwana kif għandek bżonnhom. In-naħa ta' fuq tal-lemin ħafna drabi tintuża għan-notifiki, bħalma hija n-nofs ta' fuq. Jekk int qatt ser turi toast wieħed kull darba, poġġi l-istili tal-pożizzjonament dritt fuq il- .toast.

Bootstrap 11-il minuta ilu
Hello dinja! Dan huwa messaġġ 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>

Għal sistemi li jiġġeneraw aktar notifiki, ikkunsidra li tuża element tat-tgeżwir sabiex ikunu jistgħu jinġabru faċilment.

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>

Tista 'wkoll tikseb fancy b'utilitajiet flexbox biex tallinja toasts orizzontalment u/jew vertikalment.

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>

Aċċessibilità

It-toasts huma intenzjonati li jkunu interruzzjonijiet żgħar għall-viżitaturi jew l-utenti tiegħek, għalhekk biex tgħin lil dawk li għandhom screen readers u teknoloġiji ta' assistenza simili, għandek tkebbeb it-toasts tiegħek aria-livef'reġjun . Bidliet fir-reġjuni ħajjin (bħal injezzjoni/aġġornament ta 'komponent toast) huma mħabbra awtomatikament minn qarrejja tal-iskrin mingħajr il-bżonn li jċaqalqu l-fokus tal-utent jew inkella jinterrompu lill-utent. Barra minn hekk, inkludi aria-atomic="true"biex tiżgura li t-toast kollu dejjem jitħabbar bħala unità waħda (atomika), aktar milli sempliċement tħabbar dak li nbidel (li jista’ jwassal għal problemi jekk taġġorna biss parti mill-kontenut tat-toast, jew jekk turi l-istess kontenut ta’ toast fi żmien aktar tard). Jekk l-informazzjoni meħtieġa hija importanti għall-proċess, eż. għal lista ta’ żbalji f’forma, imbagħad uża l- komponent ta’ twissijaminflok toast.

Innota li r-reġjun ħaj jeħtieġ li jkun preżenti fil-markup qabel ma l-toast jiġi ġġenerat jew aġġornat. Jekk tiġġenera t-tnejn b'mod dinamiku fl-istess ħin u tinjettahom fil-paġna, ġeneralment ma jitħabbrux minn teknoloġiji ta' assistenza.

Għandek bżonn ukoll tadatta l- roleu aria-livelivell skond il-kontenut. Jekk huwa messaġġ importanti bħal żball, uża role="alert" aria-live="assertive", inkella uża role="status" aria-live="polite"attributi.

Hekk kif il-kontenut li qed turi jinbidel, kun żgur li taġġorna l- delaytimeout sabiex l-utenti jkollhom biżżejjed ħin biex jaqraw it-toast.

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

Meta tuża autohide: false, trid iżżid buttuna mill-qrib biex tippermetti lill-utenti jwarrbu t-toast.

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>

Filwaqt li teknikament huwa possibbli li żżid kontrolli ffukabbli/azzjonibbli (bħal buttuni jew links addizzjonali) fit-toast tiegħek, għandek tevita li tagħmel dan għal toasts li jaħbu awtomatikament. Anke jekk tagħti delaytimeout twil lill-toast , l-utenti tat-tastiera u tat-teknoloġija assistiva jistgħu jsibuha diffiċli biex jilħqu l-toast fil-ħin biex jieħdu azzjoni (peress li l-toasts ma jirċevux fokus meta jintwerew). Jekk assolutament irid ikollok aktar kontrolli, nirrakkomandaw li tuża toast bi autohide: false.

CSS

Varjabbli

Miżjud fi v5.2.0

Bħala parti mill-approċċ tal-varjabbli tas-CSS li qed jevolvi Bootstrap, it-toasts issa jużaw varjabbli tas-CSS lokali .toastgħal customization mtejba f'ħin reali. Il-valuri għall-varjabbli CSS huma stabbiliti permezz ta 'Sass, għalhekk il-personalizzazzjoni ta' Sass għadha appoġġjata wkoll.

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

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

Użu

Inizjalizza toasts permezz ta' JavaScript:

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

Triggers

It-tkeċċija tista' tinkiseb bl- dataattribut fuq buttuna fi ħdan it-toast kif muri hawn taħt:

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

jew fuq buttuna barra l-toast billi tuża data-bs-targetkif muri hawn taħt:

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

Għażliet

Peress li l-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript, tista' tehmeż isem ta' għażla ma' data-bs-, bħal f' data-bs-animation="{value}". Kun żgur li tbiddel it-tip tal-każ tal-isem tal-għażla minn " camelCase " għal " kebab-case " meta tgħaddi l-għażliet permezz tal-attributi tad-dejta. Per eżempju, uża data-bs-custom-class="beautifier"minflok data-bs-customClass="beautifier".

Minn Bootstrap 5.2.0, il-komponenti kollha jappoġġaw attribut ta' data riżervat sperimentalidata-bs-config li jista' jospita konfigurazzjoni ta' komponent sempliċi bħala string JSON. Meta element ikollu data-bs-config='{"delay":0, "title":123}'u data-bs-title="456"attributi, il- titlevalur finali se jkun 456u l-attributi tad-dejta separati jegħlbu l-valuri mogħtija fuq data-bs-config. Barra minn hekk, l-attributi tad-dejta eżistenti jistgħu jospitaw valuri JSON bħal data-bs-delay='{"show":0,"hide":150}'.

Isem Tip Default Deskrizzjoni
animation boolean true Applika transizzjoni fade CSS għall-toast.
autohide boolean true Aħbi awtomatikament it-toast wara d-dewmien.
delay numru 5000 Dewmien f'millisekondi qabel ma taħbi t-toast.

Metodi

Metodi asinkroniċi u tranżizzjonijiet

Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .

Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .

Metodu Deskrizzjoni
dispose Jaħbi toast ta' element. It-toast tiegħek se jibqa' fuq id-DOM iżda mhux se juri aktar.
getInstance Metodu statiku li jippermettilek tikseb l-istanza toast assoċjata ma 'element DOM.
Per eżempju: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Jirritorna eżempju Bootstrap toast.
getOrCreateInstance Metodu statiku li jippermettilek li tikseb l-istanza toast assoċjata ma 'element DOM, jew toħloq waħda ġdida, f'każ li ma kienx inizjalizzat.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Jirritorna eżempju Bootstrap toast.
hide Jaħbi toast ta' element. Jirritorna lil min iċempel qabel ma l-toast fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.toastjseħħ l-avveniment). Int trid issejjaħ dan il-metodu manwalment jekk għamilt autohidegħal false.
isShown Jirritorna boolean skond l-istat ta 'viżibilità ta' toast.
show Jikxef toast ta 'element. Jirritorna lil min iċempel qabel ma l-toast fil-fatt intwera (jiġifieri qabel ma shown.bs.toastjseħħ l-avveniment). Int trid issejjaħ dan il-metodu manwalment, minflok it-toast tiegħek mhux se juri.

Avvenimenti

Avveniment Deskrizzjoni
hide.bs.toast Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu tal-istanza jkun ġie msejjaħ.
hidden.bs.toast Dan l-avveniment jiġi sparat meta t-toast ikun spiċċa moħbi mill-utent.
show.bs.toast Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza.
shown.bs.toast Dan l-avveniment jiġi sparat meta t-toast ikun sar viżibbli għall-utent. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})