Titositi

Susa switiviso eka vaendzi va wena hi tositi, rungula ra xitsundzuxo leri olovaka ni leri nga cinciwaka hi ku olova.

Ti- toast i switiviso swo olova leswi endleriweke ku tekelela switiviso swo susumeta leswi dumeke hi tisisiteme to tirha ta tiselfoni ni ta le desktop. Ti akiwile hi flexbox, kutani swa olova ku ti ringanisa na ku ti veka.

Nkatsakanyo

Swilo leswi u faneleke u swi tiva loko u tirhisa plugin ya toast:

Loko u aka JavaScript ya hina ku suka eka xihlovo, swi lavautil.js .
Ti- toast i ti-opt-in hikwalaho ka swivangelo swa matirhelo, hikwalaho u fanele u ti sungula hi wexe .
Hi kombela mi xiya leswaku u ni vutihlamuleri byo veka ti- toast.
Ti toast ti ta tifihla hi toxe loko u nga boxi autohide: false.

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Swikombiso

Ntolovelo

Ku khutaza ti toast leti andlariwaka na leti nga languteriwaka, hi ringanyeta nhloko na miri. Toast headers use display: flex, ku pfumelela ku olova ka ku ringanisa ka swilo leswi nga endzeni hikwalaho ka switirhisiwa swa hina swa margin na flexbox.

Ti toasts ti olova hilaha u lavaka hakona naswona tina markup yitsongo swinene leyi lavekaka. Eka mpimo wa le hansi, hi lava elemente yin’we ku va na nhundzu ya wena leyi “tosiweke” naswona hi khutaza swinene buti yo hlongola.

Xewani, misava! Leri i rungula ra 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>

Hanya

Click button leyi nga laha hansi ku kombisa toast (yi vekiwile na switirhisiwa swa hina ekhonweni ya le hansi ya xinene) leyi fihliweke hi ku tiyimisela hi .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>

Ku vonakala loku vonakaka kahle

Ti toasts tina translucent nyana kuva ti hlangana na leswinga ehansi ka tona.

Xewani, misava! Leri i rungula ra 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>

Ku hlanganisiwa ka swilo

Loko u ri na ti- toast to tala, hi default ku ti stacking hi ndlela yo olova hi ndlela leyi hlayekaka.

Vona? Ku fana na leswi ntsena.

Tinhloko ti tlakukile, ti toast ti ta stack hi toxe

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

Ku vekiwa ka swilo

Veka ti toasts hi custom CSS tani hi leswi u swi lavaka. Le henhla exineneni hakanyingi ku tirhisiwa switiviso, ku fana ni le henhla exikarhi. Loko u ta tshama u kombisa tositi yin’we ntsena hi nkarhi, veka switayele swo veka swilo kunene eka .toast.

Xewani, misava! Leri i rungula ra 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>

Eka tisisiteme leti humesaka switiviso swo tala, anakanya hi ku tirhisa elemente yo phutsela leswaku ti ta kota ku hlanganisa hi ku olova.

Vona? Ku fana na leswi ntsena.

Tinhloko ti tlakukile, ti toast ti ta stack hi toxe

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

U nga ha tlhela u kuma fancy hi switirhisiwa swa flexbox ku ringanisa ti toasts hi ndlela yo olova na/kumbe hi ndlela yo olova.

Xewani, misava! Leri i rungula ra 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>

Ku fikelela

Ti- toast ti endleriwe ku va swilo leswitsongo leswi kavanyetaka vaendzi kumbe vatirhisi va wena, hikwalaho leswaku u pfuna lava nga ni swihlaya-swikirini ni thekinoloji leyi fanaka leyi pfunaka, u fanele u phutsela ti- toast ta wena aria-liveexifundzheni xo karhi . Ku cinca eka swifundzha leswi hanyaka (ku fana na ku chela/pfuxeta xiphemu xa toast) swi tivisiwa hi ku tisungulela hi vahlayi va xikirini handle ko lava ku fambisa nhlokomhaka ya mutirhisi kumbe hi ndlela yin’wana ku kavanyeta mutirhisi. Ku engetela kwalaho, katsa aria-atomic="true"ku tiyisisa leswaku tositi hinkwayo yi tshama yi ri karhi yi tivisiwa tanihi yuniti yin’we (ya athomo), ematshan’weni yo tivisa ntsena leswi cinciweke (leswi nga vangaka swiphiqo loko u pfuxeta ntsena xiphemu xa leswi nga endzeni ka tositi, kumbe loko u kombisa swilo leswi fanaka swa tositi eka nkarhi wa le ndzhaku). Loko mahungu lama lavekaka ya ri ya nkoka eka phurosese, xikombiso eka nxaxamelo wa swihoxo eka fomo, kutani tirhisa xiphemu xa xitsundzuxoematshan’weni ya toast.

Xiya leswaku ndzhawu leyi hanyaka yifanele kuva kona eka markup loko toast yinga se endliwa kumbe ku pfuxetiwa. Loko u tumbuluxa hi ndlela leyi cinca-cincaka havumbirhi bya swona hi nkarhi wun’we ivi u swi nghenisa eka tluka, hi ntolovelo a swi nge tivisiwi hi thekinoloji yo pfuneta.

U fanele ku tlhela u cinca-cinca rolena aria-livelevel ku ya hi leswi nga endzeni. Loko ku ri rungula ra nkoka ku fana na xihoxo, tirhisa role="alert" aria-live="assertive", handle ka sweswo tirhisa role="status" aria-live="polite"swihlawulekisi.

Loko swilo leswi u swi kombisaka swi ri karhi swi cinca, tiyiseka leswaku u pfuxeta nkarhi lowu delayheleke leswaku vatirhisi va va ni nkarhi lowu eneleke wo hlaya 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>

Loko u tirhisa autohide: false, u fanele u engetela buti yo pfala leswaku u pfumelela vatirhisi ku hlongola tositi.

Xewani, misava! Leri i rungula ra 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>

Loko hi tlhelo ra xithekiniki swinga koteka ku engetela vulawuri lebyi kongomisaka/leswi nga endliwaka (kufana na ti buttons to engetela kumbe swihlanganisi) eka toast ya wena, ufanele ku papalata ku endla leswi eka ti autohiding toasts. Even if you give the toast a long delaytimeout , vatirhisi va khibhodi ni thekinoloji yo pfuneta va nga ha kuma swi tika ku fikelela toast hi nkarhi leswaku va teka goza (tanihi leswi ti- toast ti nga kumiki ku kongomisa loko ti kombisiwa). Loko hi ku helela u fanele u va ni vulawuri byin’wana, hi ringanyeta ku tirhisa tositi leyi nga ni autohide: false.

Mahanyelo ya JavaScript

Matirhiselo

Sungula ti- toast hi ku tirhisa JavaScript:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-animation="".

Vito	Muxaka	Ku tlula	Nhlamuselo
ku endla swifaniso leswi hanyaka	xitsonga xitsonga	ntiyiso	Tirhisa ku cinca ka CSS fade eka toast
autohide	xitsonga xitsonga	ntiyiso	Auto tumbeta toast
hlwela	nomboro	`500`	Ku hlwela ku tumbeta toast (ms) .

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

`$().toast(options)`

Ku khomanisa xitirhisiwa xo khoma toast eka nhlengeleto wa swiaki.

`.toast('show')`

Ku paluxa toast ya elemente. Ku tlhelela eka mufoyini loko tositi yi nga si kombisiwa hakunene (i.e. loko shown.bs.toastxiendlakalo xi nga si humelela). U fanele ku vitana ndlela leyi hi voko, ematshan’wini ya sweswo toast ya wena a yi nge kombisi.

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

`.toast('hide')`

Ku tumbeta toast ya elemente. Ku tlhelela eka mufoyini loko toast yi nga si fihliwa hakunene (i.e. loko hidden.bs.toastxiendlakalo xi nga si humelela). U fanele ku vitana ndlela leyi hi voko loko u endle autohideku false.

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

`.toast('dispose')`

Ku tumbeta toast ya elemente. Toast ya wena yi ta tshama yi ri eka DOM kambe a yi nge he kombisi.

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

Swiendlakalo

Muxaka wa Xiendlakalo	Nhlamuselo
kombisa.bs.toast	Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku `show`vitaniwa ndlela ya xikombiso.
ku kombisiwile.bs.toast	Xiendlakalo lexi xi hisiwa loko toast yi endliwile yi vonaka eka mutirhisi.
tumbeta.bs.toast	Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko ndlela ya `hide`xikombiso yi vitaniwile.
ku fihliwile.bs.toast	Xiendlakalo lexi xi duvuriwa loko tositi yi hetile ku tumbetiwa eka mutirhisi.

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