Source

Toasts

Shiriki arifa kwa wageni wako na toast, ujumbe wa tahadhari unaoweza kubinafsishwa kwa urahisi.

Toasts ni arifa nyepesi zilizoundwa kuiga arifa zinazotumwa na programu hata wakati huitumii ambazo zimeenezwa na mifumo ya uendeshaji ya simu na kompyuta ya mezani. Zimeundwa kwa flexbox, kwa hivyo ni rahisi kupangilia na kuziweka.

Muhtasari

Mambo ya kujua unapotumia programu-jalizi ya toast:

  • Ikiwa unaunda JavaScript yetu kutoka kwa chanzo, inahitajiutil.js .
  • Toasts ni kuchagua kuingia kwa sababu za utendaji, kwa hivyo ni lazima uzianzishe wewe mwenyewe .
  • Tafadhali kumbuka kuwa una jukumu la kuweka toasts.
  • Toasts zitajificha kiotomatiki ikiwa hutabainisha autohide: false.

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Mifano

Msingi

Ili kuhimiza toasts kupanuliwa na kutabirika, tunapendekeza kichwa na mwili. Vijajuu vya toast hutumia display: flex, kuruhusu upangaji rahisi wa maudhui kutokana na ukingo wetu na huduma za flexbox.

Toasts ni rahisi kama unavyohitaji na zina alama ndogo sana zinazohitajika. Kwa uchache, tunahitaji kipengele kimoja ili kuwa na maudhui yako "yaliyochapwa" na kuhimiza kwa nguvu kitufe cha kukataa.

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

Uwazi

Toasts ni nyepesi kidogo, pia, kwa hivyo huchanganyika juu ya chochote ambacho kinaweza kuonekana. Kwa vivinjari vinavyotumia sifa ya backdrop-filterCSS, tutajaribu pia kutia ukungu vipengele chini ya 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>

Kuweka mrundikano

Unapokuwa na toast nyingi, tunaziweka kwa mpangilio wima kwa njia inayoweza kusomeka.

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

Uwekaji

Weka toasts kwa kutumia CSS maalum unavyohitaji. Sehemu ya juu kulia mara nyingi hutumiwa kwa arifa, kama ilivyo sehemu ya juu ya kati. Iwapo utawahi tu kuonyesha toast moja kwa wakati mmoja, weka mitindo ya kuweka kwenye .toast.

Bootstrap Dakika 11 zilizopita
Salamu, Dunia! Huu ni ujumbe 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>

Kwa mifumo inayozalisha arifa zaidi, zingatia kutumia kipengee cha kufunga ili ziweze kupangwa kwa urahisi.

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

Unaweza pia kupendezwa na huduma za flexbox ili kupanga toasts mlalo na/au wima.

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

Ufikivu

Toast inakusudiwa kuwa usumbufu mdogo kwa wageni au watumiaji wako, kwa hivyo ili kuwasaidia wale walio na visoma skrini na teknolojia sawa za usaidizi, unapaswa kukunja toast zako katika aria-liveeneo . Mabadiliko kwenye maeneo ya moja kwa moja (kama vile kuingiza/kusasisha kijenzi cha toast) hutangazwa kiotomatiki na visoma skrini bila kuhitaji kusogeza lengo la mtumiaji au kumkatiza mtumiaji vinginevyo. Zaidi ya hayo, jumuisha aria-atomic="true"kuhakikisha kuwa toast nzima inatangazwa kila wakati kama kitengo kimoja (atomiki), badala ya kutangaza kilichobadilishwa (jambo ambalo linaweza kusababisha matatizo ikiwa utasasisha tu sehemu ya maudhui ya toast, au ikiwa unaonyesha maudhui sawa ya toast. hatua ya baadaye). Ikiwa taarifa inayohitajika ni muhimu kwa mchakato, kwa mfano kwa orodha ya makosa katika fomu, basi tumia kipengele cha tahadhari .badala ya toast.

Kumbuka kuwa eneo la moja kwa moja linahitaji kuwepo katika ghafi kabla ya toast kuzalishwa au kusasishwa. Ukitengeneza zote mbili kwa wakati mmoja na kuziingiza kwenye ukurasa, kwa ujumla hazitatangazwa na teknolojia za usaidizi.

Pia unahitaji kurekebisha rolena aria-livekiwango kulingana na yaliyomo. Ikiwa ni ujumbe muhimu kama kosa, tumia role="alert" aria-live="assertive", vinginevyo tumia role="status" aria-live="polite"sifa.

Kadri maudhui unayoonyesha yanavyobadilika, hakikisha kwamba umesasisha muda wa delaykuisha ili kuhakikisha watu wana muda wa kutosha wa kusoma 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>

Unapotumia autohide: false, lazima uongeze kitufe cha kufunga ili kuruhusu watumiaji kuondoa 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>

Tabia ya JavaScript

Matumizi

Anzisha toasts kupitia JavaScript:

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

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-animation="".

Jina Aina Chaguomsingi Maelezo
uhuishaji boolean kweli Tumia mpito wa kufifia kwa CSS kwenye toast
kujificha kiotomatiki boolean kweli Ficha toast kiotomatiki
kuchelewa nambari 500 Kuchelewa kuficha toast (ms)

Mbinu

Njia za Asynchronous na mabadiliko

Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .

Tazama hati zetu za JavaScript kwa maelezo zaidi .

$().toast(options)

Huambatanisha kidhibiti cha toast kwenye mkusanyiko wa vipengele.

.toast('show')

Huonyesha toast ya kipengele. Hurejesha kwa mpigaji simu kabla toast haijaonyeshwa (yaani kabla ya shown.bs.toasttukio kutokea). Utalazimika kupiga simu kwa njia hii mwenyewe, badala yake toast yako haitaonekana.

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

.toast('hide')

Huficha toast ya kipengele. Hurejesha kwa mpigaji simu kabla toast haijafichwa (yaani kabla ya hidden.bs.toasttukio kutokea). Lazima upigie simu njia hii mwenyewe ikiwa ulifanya autohide.false

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

.toast('dispose')

Huficha toast ya kipengele. Toast yako itasalia kwenye DOM lakini haitaonekana tena.

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

Matukio

Aina ya Tukio Maelezo
show.bs.toast Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
imeonyeshwa.bs.tosti Tukio hili huwashwa wakati toast imefanywa kuonekana kwa mtumiaji.
ficha.bs.toast Tukio hili linafutwa mara moja wakati hidenjia ya mfano imeitwa.
toast.bs.fiche Tukio hili huwashwa wakati toast imekamilika kufichwa kutoka kwa mtumiaji. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})