Source

Gishiri

Tura sanarwar zuwa ga baƙi tare da abin yabo, saƙon faɗakarwa mai sauƙi kuma mai sauƙin daidaitawa.

Toasts sanarwa ne masu nauyi da aka tsara don kwaikwayi sanarwar turawa waɗanda tsarin aiki na hannu da tebur suka shahara. An gina su da flexbox, don haka suna da sauƙin daidaitawa da matsayi.

Dubawa

Abubuwan da ya kamata ku sani lokacin amfani da toast plugin:

  • Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatarutil.js .
  • Toasts suna shiga saboda dalilan aiki, don haka dole ne ka fara su da kanka .
  • Lura cewa kai ke da alhakin sanya toasts.
  • Toasts zai ɓoye ta atomatik idan ba ku ƙayyade ba autohide: false.

Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

Misalai

Na asali

Don ƙarfafa abubuwan da za a iya faɗi da kuma abin da za a iya faɗi, muna ba da shawarar kai da jiki. Ana amfani da masu kai na toast display: flex, suna ba da damar daidaita abun ciki cikin sauƙi godiya ga gefen mu da kayan aikin flexbox.

Toasts suna da sassauƙa kamar yadda kuke buƙata kuma suna da ƙarancin alamar da ake buƙata. Aƙalla, muna buƙatar kashi ɗaya don ƙunshe da abun cikin "toasted" da ƙarfafa maɓallin korar.

<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 suna da ɗan haske kaɗan, kuma, don haka suna haɗuwa a kan duk abin da za su iya bayyana. Ga masu bincike waɗanda ke goyan bayan backdrop-filterkadarar CSS, za mu kuma yi ƙoƙarin ɓata abubuwan da ke ƙarƙashin abin 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>

Tari

Lokacin da kuke da toasts masu yawa, muna tsoho don tara su a tsaye ta hanyar da za a iya karantawa.

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

Wuri

Sanya gwangwani tare da CSS na al'ada kamar yadda kuke buƙata. Ana amfani da saman dama sau da yawa don sanarwa, kamar yadda babban tsakiya yake. Idan za ku taɓa nuna abin yabo ɗaya a lokaci ɗaya, sanya salon sakawa daidai akan .toast.

Bootstrap Minti 11 da suka gabata
Sannu Duniya! Wannan sakon gasa ne. 
<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>

Don tsarin da ke samar da ƙarin sanarwa, yi la'akari da amfani da abin rufewa don su iya tarawa cikin sauƙi.

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

Hakanan zaka iya samun zato tare da kayan aikin flexbox don daidaita toasts a kwance da/ko a tsaye.

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

Dama

Toasts an yi niyya don zama ƙananan katsewa ga baƙi ko masu amfani da ku, don haka don taimakawa waɗanda ke da masu karanta allo da makamantan fasahar taimako, ya kamata ku nannade abubuwan toast ɗinku a cikin aria-liveyanki . Canje-canje ga yankuna masu rai (kamar allura / sabunta kayan toast) ana sanar da su ta atomatik ta masu karanta allo ba tare da buƙatar motsa hankalin mai amfani ba ko kuma katse mai amfani. Bugu da ƙari, haɗa aria-atomic="true"da don tabbatar da cewa ana sanar da duk abin da ake yi wa burodin a matsayin ɗaya (atomic), maimakon sanar da abin da aka canza (wanda zai iya haifar da matsaloli idan kawai kun sabunta wani ɓangare na abun ciki na toast ɗin, ko kuma idan kuna nuna irin abin da ke cikin abin toast ɗin a ciki). wani batu a cikin lokaci). Idan bayanin da ake buƙata yana da mahimmanci ga tsari, misali don jerin kurakurai a cikin tsari, sannan yi amfani da ɓangaren faɗakarwamaimakon gurasa.

Lura cewa yankin mai rai yana buƙatar kasancewa a cikin alamar kafin a ƙirƙira ko sabunta gurasar. Idan kun samar da duka biyun a lokaci guda kuma ku cusa su cikin shafin, gabaɗaya ba za a sanar da su ta hanyar fasahar taimako ba.

Hakanan kuna buƙatar daidaitawa roleda aria-livematakin dangane da abun ciki. Idan saƙo ne mai mahimmanci kamar kuskure, yi amfani da role="alert" aria-live="assertive", in ba haka ba amfani da role="status" aria-live="polite"sifofi.

Kamar yadda abun cikin da kuke nunawa ke canzawa, tabbatar da sabunta lokacin delayƙarewa don tabbatar da cewa mutane suna da isasshen lokacin karanta abin 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>

Lokacin amfani da autohide: false, dole ne ka ƙara maɓallin kusa don ƙyale masu amfani suyi watsi da abin 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>

Halin JavaScript

Amfani

Fara toasts ta JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-animation="".

Suna Nau'in Default Bayani
tashin hankali boolean gaskiya Aiwatar da canjin CSS zuwa ga abin yabo
autoboye boolean gaskiya Boye toast ta atomatik
jinkiri lamba 500 Jinkirin ɓoye gurasar (ms)

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani .

$().toast(options)

Haɗa mai sarrafa toast zuwa tarin abubuwa.

.toast('show')

Ya bayyana toast ɗin kashi. Komawa ga mai kira kafin a nuna abin toast a zahiri (watau kafin shown.bs.toastabin ya faru). Dole ne ku kira wannan hanyar da hannu, maimakon abin toast ɗinku ba zai nuna ba.

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

.toast('hide')

Yana ɓoye gurasar wani abu. Komawa ga mai kira kafin abin yabo ya kasance a ɓoye (watau kafin hidden.bs.toastabin ya faru). Dole ne ku kira wannan hanyar da hannu idan kun autohideyi false.

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

.toast('dispose')

Yana ɓoye gurasar wani abu. Toast ɗin ku zai kasance akan DOM amma ba zai ƙara nunawa ba.

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

Abubuwan da suka faru

Nau'in Taron Bayani
nuna.bs.toast Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
nuna.bs.toast Ana kora wannan taron lokacin da aka bayyana abin toast ga mai amfani.
boye.bs.toast Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
boye.bs. toast Ana kora wannan taron lokacin da abin yabo ya gama ɓoye daga mai amfani. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})