in English

Tositi ezifumbirwa

Push notifications to your visitors with a toast, obubaka obw’okulabula obutazitowa era obwangu okulongoosa.

Toasts bye bimanyisibwa ebizitowa ebikoleddwa okukoppa okumanyisibwa okusindika okubadde kwettanirwa enkola z’oku ssimu ne ku mmeeza. Zizimbibwa ne flexbox, kale nnyangu okuzikwataganya n’okuziteeka mu kifo.

Okulaba okutwalira awamu

Ebintu by’olina okumanya ng’okozesa toast plugin:

  • Bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisautil.js .
  • Toasts zibeera opt-in olw’ensonga z’okukola, kale olina okuzitandika ggwe kennyini .
  • Nsaba omanye nti ggwe ovunaanyizibwa ku kuteeka tositi mu kifo.
  • Toasts zijja kwekweka zokka singa tolambika autohide: false.
Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Eby’okulabirako

Kya bulijjo

Okukubiriza tositi ezigaziwa era eziteeberezebwa, tusaba omutwe n’omubiri. Toast headers use display: flex, okusobozesa okwanguyirwa okulaganya ebirimu okwebaza margin ne flexbox utilities zaffe.

Toasts zikyukakyuka nga bwe weetaaga era zirina markup ntono nnyo eyeetaagisa. Ekitono ennyo, twetaaga ekintu kimu okubeeramu ebirimu byo “ebyokeddwa” era tukubiriza nnyo bbaatuuni y’okugoba.

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

Kubeera

Nywa ku bbaatuuni wansi okulaga tositi (eteekeddwa n’ebikozesebwa byaffe mu nsonda eya wansi ku ddyo) ebadde ekwekeddwa mu butonde ne .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>

Ekitangaala ekitangalijja

Tositi zitangalijja katono okutabula n’ebiri wansi wazo.

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

Okutunga

Bw’oba ​​olina tositi eziwera, tuziteeka mu vertikal mu ngeri esomebwa.

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

Okuteekebwa mu kifo

Teeka toasts ne custom CSS nga bw'ozeetaaga. Waggulu ku ddyo atera okukozesebwa okumanyisa, nga bwe kiri waggulu wakati. Bw’oba ​​ogenda okulaga tositi emu yokka omulundi gumu, teeka emisono gy’okuteeka mu kifo ekituufu ku .toast.

Omusipi gwa Bootstrap 11 mins eziyise
Mwasuze mutya ensi! Buno bubaka bwa 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>

Ku nkola ezikola okumanyisibwa okusingawo, lowooza ku kukozesa ekintu ekizinga zisobole okwanguyirwa okutunga.

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

Osobola n’okufuna fancy ne flexbox utilities okulaganya toasts horizontally ne/oba vertically.

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

Okutuuka ku bantu

Tositi zigendereddwamu okuba obutaataaganya obutonotono eri abagenyi bo oba abakozesa, kale okuyamba abo abalina ebisoma ku ssirini ne tekinologiya ow’enjawulo ayamba, olina okuzinga tositi zo mu aria-livekitundu . Enkyukakyuka mu bitundu ebiramu (nga okukuba empiso/okuzza obuggya ekitundu kya tositi) zilangirirwa mu ngeri ey’otoma abasoma ku ssirini nga tekyetaagisa kutambuza kifo ky’omukozesa oba okusalako omukozesa mu ngeri endala. Okugatta ku ekyo, ssaamu aria-atomic="true"okukakasa nti tositi yonna bulijjo elangirirwa nga yuniti emu (atomu), okusinga okulangirira kyokka ekyakyusibwa (ekiyinza okuvaako obuzibu singa otereeza ekitundu kyokka ku birimu tositi, oba singa olaga ebirimu mu tositi bye bimu mu kiseera ekiddako). Singa amawulire ageetaagisa gaba makulu eri enkola, okugeza ku lukalala lw’ensobi mu ffoomu, olwo kozesa ekitundu eky’okulabulamu kifo kya tositi.

Weetegereze nti ekitundu ekiramu kyetaaga okubaawo mu markup nga toast tennakolebwa oba okulongoosebwa. Singa okola dynamically byombi mu kiseera kye kimu n’obiyingiza mu lupapula, okutwalira awamu tebijja kulangirirwa tekinologiya ayamba.

Era olina okukyusakyusa rolene aria-livelevel okusinziira ku birimu. Bwe kiba nga bubaka bukulu nga ensobi, kozesa role="alert" aria-live="assertive", bwe kitaba ekyo kozesa role="status" aria-live="polite"attributes.

Nga ebirimu by’olaga bikyuka, kakasa nti ozza obuggya delayekiseera ekiweddemu abakozesa basobole okufuna obudde obumala okusoma tositi.

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

Bw’oba ​​okozesa autohide: false, olina okugattako akabonero akaggalawo okusobozesa abakozesa okugoba tositi.

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

Wadde nga mu by’ekikugu kisoboka okwongerako ebifuga ebiyinza okussa essira/ebikolebwa (nga obutambi oba enkolagana endala) mu tositi yo, olina okwewala okukola kino ku tositi ezikweka. Ne bw’owa tositi ekiseera ekiwanvu delay, abakozesa kiiboodi ne tekinologiya ayamba bayinza okusanga obuzibu okutuuka ku tositi mu budde okukola (okuva tositi bwe zitafuna focus nga ziragiddwa). Bw’oba ​​ddala olina okuba n’ebifuga ebirala, tusaba okukozesa tositi ng’erina autohide: false.

Enneeyisa ya JavaScript

Enkozesa

Tandika tositi ng'oyita mu JavaScript:

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-animation="".

Erinnya Okuwandiika Okukosamu Okunnyonnyola
okukola ebifaananyi ebirina obulamu boolean kituufu Siiga enkyukakyuka ya CSS fade ku toast
autohide boolean kituufu Auto okukweka toast
okulwawo omuwendo 500 Okulwawo okukweka tositi (ms) .

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

$().toast(options)

Egattako ekintu ekikwata tositi ku kukungaanya elementi.

.toast('show')

Abikkula tositi ya elementi. Edda eri oyo akubira nga tositi tennalagibwa ddala (kwe kugamba nga shown.bs.toastekintu tekinnabaawo). Olina okuyita enkola eno mu ngalo, mu kifo ky’ekyo tositi yo tejja kulaga.

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

.toast('hide')

Akweka tositi ya elementi. Edda eri oyo akubira nga tositi tennakwekebwa ddala (kwe kugamba hidden.bs.toastng’ekintu tekinnabaawo). Olina okuyita enkola eno mu ngalo singa wakola autohideku false.

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

.toast('dispose')

Akweka tositi ya elementi. Toast yo ejja kusigala ku DOM naye tegenda kuddamu kulaga.

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

Ebibaddewo

Ekika ky’Ekibaddewo Okunnyonnyola
okulaga.bs.toast Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
alagiddwa.bs.toast Omukolo guno gukubwa nga tositi emaze okulabika eri oyo agikozesa.
okukweka.bs.okusiiga Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
ekikwekebwa.bs.toast Omukolo guno gukubwa nga tositi emaze okukwekebwa eri oyo agikozesa. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})