Toasts

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

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:

Jekk qed tibni JavaScript tagħna mis-sors, teħtieġutil.js .
It-toasts huma opt-in għal raġunijiet ta' prestazzjoni, għalhekk trid tinizjalizzahom lilek innifsek .
Jekk jogħġbok innota li inti responsabbli għall-pożizzjonament toasts.
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.

Hello dinja! Dan huwa messaġġ 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>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>

Jgħix

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 awtomatikament b' .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Trasluċidi

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

Hello dinja! Dan huwa messaġġ 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>

Stivar

Meta jkollok toasts multipli, aħna npoġġuhom b'mod vertikali b'mod li jinqara.

Ara? Eżatt bħal dan.

Irjus up, toasts se munzell awtomatikament

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

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.

Hello dinja! Dan huwa messaġġ 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>

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

Ara? Eżatt bħal dan.

Irjus up, toasts se munzell awtomatikament

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

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

Hello dinja! Dan huwa messaġġ toast.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

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

Hello dinja! Dan huwa messaġġ toast.

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

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.

Imġieba JavaScript

Użu

Inizjalizza toasts permezz ta' JavaScript:

$('.toast').toast(option)

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-animation="".

Isem	Tip	Default	Deskrizzjoni
animazzjoni	boolean	veru	Applika transizzjoni fade CSS għall-toast
awtohide	boolean	veru	Aħbi awtomatikament it-toast
dewmien	numru	`500`	Dewmien biex jaħbi l-toast (ms)

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 .

`$().toast(options)`

Jwaħħal toast handler ma' kollezzjoni ta' elementi.

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

$('#element').toast('show')

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

$('#element').toast('hide')

`.toast('dispose')`

Jaħbi toast ta' element. It-toast tiegħek se jibqa' fuq id-DOM iżda mhux se juri aktar.

$('#element').toast('dispose')

Avvenimenti

Tip ta' Avveniment	Deskrizzjoni
juru.bs.toast	Dan l-avveniment jispara immedjatament meta `show`jissejjaħ il-metodu tal-istanza.
muri.bs.toast	Dan l-avveniment jiġi sparat meta t-toast ikun sar viżibbli għall-utent.
ħabi.bs.toast	Dan l-avveniment jiġi sparat immedjatament meta l- `hide`metodu tal-istanza jkun ġie msejjaħ.
moħbija.bs.toast	Dan l-avveniment jiġi sparat meta t-toast ikun spiċċa moħbi mill-utent.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})