Source

Toasts

Jiri toast, dị fechaa ma dịkwa mfe ịhazi ozi ndị ọbịa gị.

Toasts bụ ọkwa dị fechaa nke emebere iji ṅomie ọkwa ntanye nke sistemu eji arụ ọrụ ekwentị na desktọpụ na-ewu ewu. Ejiri flexbox rụọ ha, yabụ na ọ dị mfe ịhazi na ọnọdụ.

Nchịkọta

Ihe ị ga-ama mgbe ị na-eji ngwa mgbakwunye toast:

  • Ọ bụrụ na ị na-ewu Javascript anyị site na isi iyi, ọ chọrọutil.js .
  • A na-abanye na toasts maka ebumnuche arụmọrụ, yabụ ị ga-ebido ya n'onwe gị .
  • Biko mara na ọ bụ gị na-ahụ maka idobe toasts.
  • Toast ga-ezo na-akpaghị aka ma ọ bụrụ na i kọwapụtaghị autohide: false.

Ihe atụ

Isi

Iji kwalite toasts nwere ike ịgbatị na nke enwere ike ịkọ, anyị na-akwado nkụnye eji isi mee na ahụ. Ndị isi toast na-eji display: flex, na-enye ohere ịhazi ọdịnaya dị mfe maka oke na ngwa flexbox anyị.

Toasts na-agbanwe dị ka ịchọrọ ma nwee obere akara achọrọ. Opekempe, anyị chọrọ otu mmewere iji nwee ọdịnaya “toasted” gị ma gbasie mbọ ike ka ịwepu bọtịnụ.

<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

Toasts dịkwa ntakịrị translucent, yabụ ha na-agwakọta ihe ọ bụla ha nwere ike ịpụta. Maka ihe nchọgharị na-akwado backdrop-filterakụrụngwa CSS, anyị ga-anwa ime ka ihe ndị ahụ mebie ihe n'okpuru 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>

Nkwakọba

Mgbe ị nwere ọtụtụ toasts, anyị na-adabara ịkwado ha na kwụ ọtọ n'ụzọ enwere ike ịgụ.

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

Ndokwa

Tinye nri nri nwere CSS omenala dịka ịchọrọ ha. A na-ejikarị aka nri elu eme ihe ngosi, dịka ọ dị n'etiti etiti. Ọ bụrụ naanị na ị na-aga igosi otu tost n'otu oge, tinye ụdị ntọhapụ nke ọma na faịlụ .toast.

eriri akpụkpọ ụkwụ Nkeji 11 gara aga
Ndewo Ụwa! Nke a bụ ozi 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>

Maka sistemụ na-ewepụta ọkwa ọkwa, tụlee iji ihe mkpuchi ka ha wee nwee ike ikpokọta ngwa ngwa.

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

Ị nwekwara ike nweta ọmarịcha site na ngwa flexbox iji kwado toasts kwụ n'ahịrị na/ma ọ bụ kwụ ọtọ.

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

Nnweta

Ezubere toasts ka ọ bụrụ obere nkwụsị nke ndị ọbịa ma ọ bụ ndị ọrụ gị, yabụ iji nyere ndị nwere ndị na-agụ ihuenyo na teknụzụ enyemaka yiri ya aka, ị kwesịrị ị kechie toast gị na aria-livempaghara . Ndị na-agụ ihuenyo na-ekwupụta mgbanwe na mpaghara ndị dị ndụ (dịka ịgbanye/imelite akụrụngwa toast) na-akpaghị aka na-enweghị mkpa ka onye ọrụ lekwasịrị anya ma ọ bụ kwụsịtụ onye ọrụ ahụ. Na mgbakwunye, gụnye aria-atomic="true"iji hụ na a na-ekwupụta ihe niile toast dị ka otu otu (atomic), kama ịkpọsa ihe gbanwere (nke nwere ike ibute nsogbu ma ọ bụrụ na ị na-emelite akụkụ nke ọdịnaya toast ahụ, ma ọ bụ ọ bụrụ na igosipụta otu ọdịnaya toast ahụ na n'oge na-adịghị anya). Ọ bụrụ na ozi achọrọ dị mkpa maka usoro ahụ, dịka ọmụmaatụ maka ndepụta njehie n'ụdị, wee jiri mpaghara njikerekama toast.

Rịba ama na mpaghara dị ndụ kwesịrị ịdị na akara ngosi tupu emelite ma ọ bụ emelite toast. Ọ bụrụ na ị na-ewepụta ha abụọ n'otu oge wee tinye ha n'ime ibe ahụ, teknụzụ enyemaka agaghị ekwupụta ha.

Ịkwesịrị ịmegharị rolena aria-liveọkwa dabere na ọdịnaya. Ọ bụrụ na ọ bụ ozi dị mkpa dị ka njehie, jiri role="alert" aria-live="assertive", ma ọ bụghị jiri role="status" aria-live="polite"njirimara.

Ka ọdịnaya ị na-egosipụta na-agbanwe, jide n'aka na imelite delayoge agwụla iji hụ na ndị mmadụ nwere oge zuru ezu iji gụọ 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>

Mgbe ị na-eji autohide: false, ị ga-atụkwasịrịrị bọtịnụ nso ka ndị ọrụ hapụ 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>

Omume Javascript

Ojiji

Melite toasts site na Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-animation="".

Aha Ụdị Ọdabara Nkọwa
animation boolean eziokwu Tinye mgbanwe mgbanwe CSS na toast
autohide boolean eziokwu Zoo toast na akpaghị aka
igbu oge nọmba 500 gbuo oge izobe toast (ms)

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

$().toast(options)

Na-ejikọta onye na-ahụ maka toast na mkpokọta mmewere.

.toast('show')

Na-ekpughe toast nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri toast n'ezie (ya bụ tupu shown.bs.toastmmemme emee). Ị ga-eji aka kpọọ usoro a, kama nke ahụ toast gị agaghị egosi.

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

.toast('hide')

Na-ezobe toast nke mmewere. Na-alaghachikwuru onye na-akpọ oku tupu ezobe toast n'ezie (ya bụ tupu hidden.bs.toastmmemme emee). Ị ga-eji aka kpọọ usoro a ma ọ bụrụ na autohideịmere false.

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

.toast('dispose')

Na-ezobe toast nke mmewere. Toast gị ga-anọgide na DOM mana ọ gaghị egosikwa ọzọ.

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

Ihe omume

Ụdị mmemme Nkọwa
gosi.bs.toast Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
egosiri.bs.toast A na-agbapụ mmemme a mgbe onye ọrụ mere ka toast ahụ hụ ya.
zoo.bs.toast A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
zoro ezo.bs.toast A na-agbapụ mmemme a mgbe ezoro ezoro onye ọrụ ahụ toast. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})