in English

Tost dɛn we dɛn kin mek

Push notis to yu visitɔ dɛn wit tost, wan layt ɛn izi fɔ kɔstɔmayz alɛt mɛsej.

Tost na layt notis dɛn we dɛn mek fɔ falamakata di push notis dɛn we mobayl ɛn dɛsktɔp ɔpreshɔn sistem dɛn dɔn mek pipul dɛn lɛk. Dɛn bil dɛn wit fleksbɔks, so dɛn izi fɔ alaynɛd ​​ɛn pozishɔn.

Ɔvaviu fɔ di Baybul

Tin dɛn fɔ no we yu de yuz di tost plɔgin:

  • If yu de bil wi JavaSkript frɔm sɔs, i nid fɔutil.js .
  • Tost na opt-in fɔ pefɔmɛns rizin, so yu fɔ initialize am yusɛf .
  • Duya mɛmba se na yu gɛt di wok fɔ put di tost dɛn.
  • Tost dɛn go ayd ɔtomɛtik wan if yu nɔ spɛsifa autohide: false.

Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

Ɛgzampul dɛn

Men

Fɔ ɛnkɔrej tost dɛn we pɔsin kin ɛkstɛnd ɛn we pɔsin kin ebul fɔ tɔk bɔt, wi kin advays fɔ yuz ɛd ɛn bɔdi. Tost headers use display: flex, alaw izi alaynɛshɔn fɔ kɔntinyu tank to wi margin ɛn flexbox yutiliti dɛn.

Tost dɛn kin fleksibul lɛk aw yu nid ɛn dɛn gɛt smɔl mak we dɛn nid. If nɔto so, wi nid wan ɛlimɛnt fɔ gɛt yu “tost” kɔntinyu ɛn wi rili ɛnkɔrej fɔ dismis bɔtin.

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

Translucent we de shayn

Tost dɛn kin translucent smɔl, bak, so dɛn kin miks oba ɛnitin we dɛn go apia oba. Fɔ brawza dɛn we de sɔpɔt di backdrop-filterCSS prɔpati, wi go tray bak fɔ blɔk di ɛlimɛnt dɛn ɔnda wan tost.

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

Stak we dɛn de stak

We yu gɛt bɔku tost dɛn, wi kin difɔlt fɔ stak dɛn vertikal wan di we we pɔsin kin rid.

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

Di ples we dɛn fɔ put am

Put tost wit kɔstɔm CSS as yu nid dɛn. Bɔku tɛm, dɛn kin yuz di ɔp rayt say fɔ notis, ɛn na di ɔp pat na di midul. If yu go jɔs ɛva sho wan tost wan tɛm, put di pozishɔn stayl dɛn rayt na di .toast.

Bootstrap fɔ yuz 11 mins dɔn pas
Halo, wɔl! Dis na tost mɛsej. 
<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>

Fɔ sistem dɛn we de jenarayz mɔ notis, tink bɔt fɔ yuz wan wrap ɛlimɛnt so dat dɛn go ebul fɔ stak izi wan.

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

Yu kin gɛt fansi bak wit fleksbɔks yutiliti fɔ alaynɛd ​​tost dɛn ɔrizɔntal ɛn/ɔ vertikal wan.

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

Di we aw pɔsin kin ebul fɔ go de

Dɛn mek tost fɔ bi smɔl smɔl tin dɛn we go ambɔg di wan dɛn we de kam fɛn yu ɔ di wan dɛn we de yuz am, so fɔ ɛp di wan dɛn we gɛt skrin rida ɛn di sem kayn tin dɛn we de ɛp yu, yu fɔ rap yu tost dɛn na wan aria-liverijyɔn . Chenj dɛn to layv rijyɔn dɛn (lɛk fɔ injɛkt/ɔpdet wan tost kɔmpɔnɛnt) na di wan dɛn we de rid di skrin kin anɔys ɔtomɛtik wan ɛn dɛn nɔ nid fɔ muv di pɔsin in fɔs ɔ ɔda we fɔ ambɔg di pɔsin we de yuz am. Apat frɔm dat, put aria-atomic="true"fɔ mek shɔ se dɛn kin ɔltɛm anɔys di wan ol tost as wan (atomik) yunit, pas fɔ anɔys wetin dɛn chenj (we kin mek yu gɛt prɔblɛm if yu jɔs ɔpdet pat pan di tin dɛn we de insay di tost, ɔ if yu de sho di sem tin we de insay di tost na wan leta pɔynt insay tɛm). If di infɔmeshɔn we dɛn nid impɔtant fɔ di prɔses, ɛgz., fɔ wan list fɔ mistek dɛn na wan fɔm, den yuz di alɛt kɔmpɔnɛntinsted fɔ mek dɛn yuz tost.

Notis se di layv rijyɔn nid fɔ de na di mak bifo dɛn mek ɔ ɔpdet di tost. If yu dinamik wan jenarayz ɔl tu di sem tɛm ɛn injɛkt dɛn insay di pej, dɛn nɔ go jɔs de anɔys bay ɛp tɛknɔlɔji dɛn.

Yu nid bak fɔ adap di roleɛn aria-livelɛvɛl dipen pan di tin dɛn we de insay. If na impɔtant mɛsej lɛk mistek, yuz role="alert" aria-live="assertive", ɔdasay yuz role="status" aria-live="polite"atribyut dɛn.

As di tin dɛn we yu de sho de chenj, mek shɔ se yu ɔpdet di delaytɛm we di tɛm dɔn fɔ mek shɔ se pipul dɛn gɛt inof tɛm fɔ rid di tost.

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

We yu de yuz autohide: false, yu fɔ ad wan klos bɔtin fɔ alaw di wan dɛn we de yuz am fɔ dismis di tost.

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

JavaSkript bihayvya

Aw fɔ yuz am

Initialize tost dɛn bay JavaSkript:

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

Di tin dɛn we yu kin pik fɔ du

Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-, lɛk insay data-animation="".

Nem Kayn Balans Tɔk bɔt
animashɔn fɔ di pikchɔ dɛn boolean we dɛn kɔl tru Aplay wan CSS fade transishɔn to di tost
ɔtohayd fɔ yusɛf boolean we dɛn kɔl tru Oto ayd di tost
westɛm nɔmba 500 Delay fɔ ayd di tost (ms) .

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ .

$().toast(options)

Ataya wan tost handla to wan elemɛnt kɔlɛkshɔn.

.toast('show')

Rivɛl wan ɛlimɛnt in tost. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tost (dat na bifo di shown.bs.toasttin apin). Yu get fo manually kol dis method, insted yu toast no go sho.

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

.toast('hide')

Ayd wan ɛlimɛnt in tost. I de go bak to di pɔsin we kɔl bifo dɛn rili ayd di tost (dat na bifo di hidden.bs.toasttin apin). Yu fɔ kɔl dis we wit yu an if yu mek autohidefɔ false.

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

.toast('dispose')

Ayd wan ɛlimɛnt in tost. Yu tost go de na di DOM bɔt i nɔ go sho igen.

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

Di tin dɛn we kin apin

Di kayn tin we apin Tɔk bɔt
sho.bs.tost fɔ sho Dis ivent de faya wantɛm wantɛm we dɛn kɔl di showinstans mɛtɔd.
sho.bs.tost we dɛn sho Dɛn kin faya dis ivin we dɛn dɔn mek di pɔsin we de yuz am si di tost.
ayd.bs.tost fɔ di wan dɛn we de Dis ivent de faya wantɛm wantɛm we hidedɛn dɔn kɔl di instans mɛtɔd.
ayd.bs.tost we dɛn dɔn ayd Dis ivent de faya we di tost dɔn dɔn fɔ ayd frɔm di pɔsin we de yuz am. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})