Source

Toast

Kankhani zidziwitso kwa alendo anu ndi toast, uthenga wopepuka komanso wachenjezo wosavuta kusintha.

Ma toast ndi zidziwitso zopepuka zopangidwira kutsanzira zidziwitso zokankhira zomwe zatchuka ndi makina ogwiritsira ntchito mafoni ndi apakompyuta. Amapangidwa ndi flexbox, kotero ndi osavuta kugwirizanitsa ndi malo.

Mwachidule

Zomwe muyenera kudziwa mukamagwiritsa ntchito pulogalamu ya toast:

  • Ngati mukupanga JavaScript yathu kuchokera kugwero, pamafunikautil.js .
  • Ma toast amasankha kulowa chifukwa cha magwiridwe antchito, chifukwa chake muyenera kuwayambitsa nokha .
  • Chonde dziwani kuti muli ndi udindo woyika toast.
  • Ma toast amabisala okha ngati simunatchule autohide: false.

Kanema wa gawoli amadalira prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Zitsanzo

Basic

Pofuna kulimbikitsa ma toast owonjezera komanso odziwikiratu, timalimbikitsa mutu ndi thupi. Mitu ya toast imagwiritsa ntchito display: flex, kulola kusanja kosavuta kwa zomwe zili m'mphepete mwathu ndi zida za flexbox.

Ma toast amasinthasintha momwe mungafunire ndipo amakhala ndi zolembera zochepa. Pang'ono ndi pang'ono, tikufuna chinthu chimodzi kuti chikhale ndi "chowotcha" ndikulimbikitsani kuti muchotse.

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

Zowoneka bwino

Ma toasts amasinthasintha pang'ono, nawonso, kotero amasakanikirana ndi chilichonse chomwe angawonekere. Kwa asakatuli omwe amagwirizana ndi backdrop-filterCSS, tidzayesanso kuyimitsa zinthu pansi pa 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>

Stacking

Mukakhala ndi ma toast angapo, timawayika molunjika m'njira yowerengeka.

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

Kuyika

Ikani toast ndi CSS yokhazikika momwe mukufunira. Chapamwamba kumanja nthawi zambiri amagwiritsidwa ntchito pazidziwitso, monganso chapakati chapakati. Ngati mungowonetsa chotupitsa chimodzi panthawi, ikani masitaelo oyika pa .toast.

Bootstrap Mphindi 11 zapitazo
Moni Dziko Lapansi! Uwu ndi uthenga wa 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>

Pamakina omwe amapanga zidziwitso zambiri, lingalirani kugwiritsa ntchito chinthu chokulungidwa kuti athe kusanjika mosavuta.

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

Muthanso kukhala osangalatsa ndi zida za flexbox kuti mugwirizane ndi toast molunjika komanso/kapena molunjika.

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

Kufikika

Ma toast amapangidwa kuti akhale zosokoneza pang'ono kwa alendo anu kapena ogwiritsa ntchito, kotero kuti muthandize omwe ali ndi zowerengera zowonera ndi matekinoloje othandizira ofanana, muyenera kukulunga ma toast anu aria-livem'dera . Zosintha m'zigawo zomwe zikuchitika (monga kubayira/kukonzanso kagawo kakang'ono ka toast) zimalengezedwa ndi owerenga zenera popanda kufunikira kusuntha malingaliro a wogwiritsa ntchito kapena kusokoneza wogwiritsa ntchito. Kuphatikiza apo, phatikizani aria-atomic="true"kuwonetsetsa kuti toast yonse imalengezedwa nthawi zonse ngati gawo limodzi (atomiki), m'malo molengeza zomwe zasinthidwa (zomwe zingayambitse mavuto ngati mutangosintha gawo lazofufumitsa, kapena ngati mukuwonetsa zomwe zili mu toast. nthawi ina pambuyo pake). Ngati zomwe zikufunika ndi zofunika pa ndondomekoyi, mwachitsanzo pa mndandanda wa zolakwika mu fomu, ndiye gwiritsani ntchito chigawo chochenjeza.m'malo mwa toast.

Zindikirani kuti dera lomwe lilipo likuyenera kukhalapo polembapo toast isanapangidwe kapena kusinthidwa . Ngati mupanga zonse ziwiri nthawi imodzi ndikuzilowetsa patsamba, sizingalengezedwe ndi matekinoloje othandizira.

Muyeneranso kusintha rolendi aria-livemlingo malinga ndi zili. Ngati ndi uthenga wofunikira ngati cholakwika, gwiritsani ntchito role="alert" aria-live="assertive", apo ayi gwiritsani ntchito mawonekedwe role="status" aria-live="polite".

Pamene zomwe mukuwonetsa zikusintha, onetsetsani kuti mwasintha delaynthawi yomaliza kuti muwonetsetse kuti anthu ali ndi nthawi yokwanira yowerengera 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>

Mukamagwiritsa ntchito autohide: false, muyenera kuwonjezera batani lotseka kuti mulole ogwiritsa ntchito kusiya 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>

Makhalidwe a JavaScript

Kugwiritsa ntchito

Yambitsani toast kudzera pa JavaScript:

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-animation="".

Dzina Mtundu Zosasintha Kufotokozera
makanema ojambula boolean zoona Ikani kusintha kwa CSS kufila ku toast
kudzibisa boolean zoona Bisani tositi yokha
kuchedwa nambala 500 Kuchedwa kubisa tositi (ms)

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

$().toast(options)

Amamangiriza chowongolera toast ku gulu lazinthu.

.toast('show')

Imawulula toast ya element. Imabwereranso kwa woyimba foniyo isanasonyezedwe (ie zisanachitike shown.bs.toast). Muyenera kuyimbira njira iyi pamanja, m'malo mwake chotupitsa chanu sichidzawonekera.

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

.toast('hide')

Imabisa tositi ya chinthu. Imabwereranso kwa woyimbirayo tisanabisike (mwachitsanzo, hidden.bs.toastchochitikacho chisanachitike). Muyenera kuyimbira pamanja njira iyi ngati autohidemunapanga false.

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

.toast('dispose')

Imabisa tositi ya chinthu. Chotupitsa chanu chidzatsalira pa DOM koma sichidzawonekeranso.

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

Zochitika

Mtundu wa Chochitika Kufotokozera
show.bs.toast Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa.
zowonetsedwa.bs.tositi Chochitika ichi chimathamangitsidwa pamene chofufumitsa chawonetsedwa kwa wogwiritsa ntchito.
kubisa.bs.chotupitsa Chochitika ichi chimachotsedwa nthawi yomweyo pamene hidenjira yachitsanzo yayitanidwa.
chobisika.bs.chowotcha Chochitikachi chimathamangitsidwa pamene tositi yatha kubisidwa kwa wogwiritsa ntchito. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})