in English

Iithowusti

Izaziso zokutyhala kubatyeleli bakho ngethowusti, umyalezo okhaphukhaphu kunye nowenziwa lula ngokwezifiso.

Iithowusti zizaziso ezikhaphukhaphu eziyilelwe ukulinganisa izaziso eziye zathandwa ziinkqubo eziphathwayo eziphathwayo kunye nedesktop. Zakhiwe nge-flexbox, ngoko kulula ukuzilungelelanisa kunye nokuma.

Isishwankathelo

Izinto omawuzazi xa usebenzisa iplagi ye-toast:

  • Ukuba wakha iJavaScript yethu kwimvelaphi, kufunautil.js .
  • Iithowusti zingenile ngenxa yezizathu zokusebenza, ke kufuneka uziqalise ngokwakho .
  • Nceda uqaphele ukuba unoxanduva lokubeka iitosti.
  • Iithowusti ziya kuzifihla ngokuzenzekelayo ukuba awukhankanyi autohide: false.
Isiphumo soopopayi seli candelo sixhomekeke prefers-reduced-motionkumbuzo wemidiya. Jonga icandelo leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .

Imizekelo

Isiseko

Ukukhuthaza i-toasts eyandisiweyo kwaye iqikeleleka, sincoma i-header kunye nomzimba. Sebenzisa iiheader ze-toast display: flex, ezivumela ulungelelwaniso olulula lomxholo enkosi kumda wethu kunye nezinto eziluncedo zebhokisi.

Iithowusti zibhetyebhetye njengoko ufuna kwaye zinophawu oluncinci olufunekayo. Ubuncinci, sifuna into enye ukuqulatha umxholo wakho "ogxothiweyo" kwaye ukhuthaze ngamandla ukukhupha iqhosha.

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

Phila

Cofa iqhosha elingezantsi ukubonisa i toast (ebekwe ngezixhobo zethu kwikona esezantsi ekunene) ebifihlwe ngokungagqibekanga nge .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>

Translucent

Iithowusti ziguquguquka kancinane ukuze zidityaniswe noko kungaphantsi kwazo.

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

Ukupakisha

Xa uneethowusti ezininzi, asigqibeki ukuzipakisha ngokuthe nkqo ngendlela efundekayo.

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

Ukubekwa

Beka iithowusti ngeCSS yesiko njengoko uzifuna. Ilungelo eliphezulu lisoloko lisetyenziselwa izaziso, njengoko kunjalo ngombindi ophezulu. Ukuba uza kubonisa ithowusti enye ngexesha, beka izimbo zokubeka kanye kwi- .toast.

I-Bootstrap Imizuzu eyi-11 eyadlulayo
Molo Lizwe! Lo ngumyalezo we-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>

Kwiisistim ezenza izaziso ezininzi, cinga ukusebenzisa into yokusonga ukuze zibe nokupakisha ngokulula.

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

Unokufumana fancy nge-flexbox utility ukulungelelanisa iithowusti ngokuthe tye kunye/okanye ngokuthe nkqo.

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

Ukufikeleleka

Iithowusti zenzelwe ukuba zibe sisiphazamiso esincinci kubatyeleli bakho okanye abasebenzisi, ke ukunceda abo banabafundi besikrini kunye nobuchwepheshe obuncedisayo obufanayo, kuya kufuneka usongele iithowusti zakho aria-livekwingingqi . Utshintsho kwimimandla ephilayo (efana nokutofa/ukuhlaziya icandelo le-toast) zibhengezwa ngokuzenzekelayo ngabafundi besikrini ngaphandle kokufuna ukususa ugxininiso lomsebenzisi okanye ngenye indlela ukuphazamisa umsebenzisi. Ukongeza, bandakanya aria-atomic="true"ukuqinisekisa ukuba yonke i-toast isoloko ibhengezwa njengeyunithi enye (yeathomu), kunokuba ubhengeze into etshintshileyo (enokukhokelela kwiingxaki ukuba uhlaziya kuphela inxalenye yomxholo we-toast, okanye ukuba ubonisa umxholo we-toast efanayo. kwixesha elizayo). Ukuba ulwazi olufunekayo lubalulekile kwinkqubo, umz. kuluhlu lweempazamo kwifom, ngoko sebenzisa icandelo lesilumkiso .endaweni ye-toast.

Qaphela ukuba ummandla ophilayo kufuneka ubekho kwi-markup ngaphambi kokuba i-toast yenziwe okanye ihlaziywe. Ukuba uvelisa zombini ngexesha elinye kwaye uzifake kwiphepha, azisayi kubhengezwa buchwephesha obuncedisayo.

Kufuneka kwakhona uhlengahlengise umgangatho rolekunye aria-livenenqanaba ngokuxhomekeke kumxholo. Ukuba ngumyalezo obalulekileyo njengempazamo, sebenzisa role="alert" aria-live="assertive", kungenjalo sebenzisa role="status" aria-live="polite"iimpawu.

Njengoko umxholo owubonisayo utshintsha, qiniseka ukuba uhlaziya delayixesha lokuvala ukuze abasebenzisi babe nexesha elaneleyo lokufunda ithowusti.

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

Xa usebenzisa autohide: false, kufuneka wongeze iqhosha lokuvala ukuvumela abasebenzisi ukuba bagxothe i-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>

Ngelixa ngokobuchwepheshe kunokwenzeka ukongeza ulawulo olunogxininiso/olunokuthatyathwa (njengamaqhosha ongezelelweyo okanye amakhonkco) kwithosti yakho, kufuneka ukuphephe ukwenza oku ngokufihla iithowusti ngokuzenzekelayo. Nokuba unika i-toast ixesha elide , abasebenzisi delaybekhibhodi kunye nabancedisi betekhnoloji banokukufumanisa kunzima ukufikelela kwi-toast ngexesha lokuthatha inyathelo (ekubeni iithowusti zingafumani ngqwalasela xa ziboniswa). Ukuba ngokuqinisekileyo kufuneka ube nolawulo olulongezelelweyo, sincoma ukusebenzisa i-toast nge autohide: false.

Ukuziphatha kweJavaScript

Ukusetyenziswa

Qalisa iithowusti ngeJavaScript:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-animation="".

Igama Uhlobo Ukuhlala kukho Inkcazo
oopopayi boolean yinyani Faka inguqu ye-CSS fade kwi-toast
zifihla boolean yinyani Fihla ithowusti ngokuzenzekela
ukulibazisa inani 500 Ukulibazisa ukufihla i-toast (ms)

Iindlela

Iindlela zeAsynchronous kunye notshintsho

Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba inguqu iqalisiwe kodwa ingekapheli . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .

Jonga uxwebhu lwethu lweJavaScript ngolwazi olungakumbi .

$().toast(options)

Iqhoboshela isibambi se toast kwingqokelela yezinto.

.toast('show')

Ityhila ithowusti yento. Ubuyela kumnxeba phambi kokuba ithowusti iboniswe (okt phambi kokuba shown.bs.toastisiganeko senzeke). Kuya kufuneka ufowunele le ndlela ngesandla, endaweni yoko i-toast yakho ayizukuvela.

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

.toast('hide')

Ifihla ithowusti yento. Ubuyela kumnxeba phambi kokuba ithowusti ifihliwe (okt phambi kokuba hidden.bs.toastisiganeko senzeke). Kuya kufuneka ufowunele le ndlela ngesandla ukuba autohideuyenzile false.

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

.toast('dispose')

Ifihla ithowusti yento. I-toast yakho iya kuhlala kwi-DOM kodwa ayisayi kuphinda ibonakale.

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

Iziganeko

Uhlobo loMnyhadala Inkcazo
bonisa.bs.toast Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
ebonisiweyo.bs.toast Esi siganeko sigxothwa xa i-toast yenziwe yabonakala kumsebenzisi.
fihla.bs.toast Esi siganeko sigxothwa ngokukhawuleza xa hideindlela yomzekelo ibiziwe.
efihliweyo.bs.toast Esi siganeko sigxothwa xa i-toast igqibile ukufihlwa kumsebenzisi. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})