Roodhiyo

Ku riix ogeysiisyada booqdayaashaada rooti rooti ah, fariin digniin ah oo fudud oo si fudud loo habeyn karo.

Toasts waa ogeysiisyo fudud oo loogu talagalay in lagu ekaysiiyo ogaysiisyada riixitaanka ee ay shaaciyeen nidaamyada hawlgalka moobaylka iyo miiska. Waxay ku dhisan yihiin flexbox, si ay u fududaato in la isku toosiyo oo meel la dhigo.

Dulmar

Waxyaabaha ay tahay in la ogaado marka la isticmaalayo plugin toast:

Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js .
Toasts-ka waxaa lagu gatay sababo waxqabad dartood, marka waa inaad adigu bilawdaa .
Fadlan ogow inaad adigu masuul ka tahay meelaynta rootiga.
Toasts si toos ah ayey u qarin doontaa haddii aadan cayimin autohide: false.

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Tusaalooyinka

Aasaaska

Si loo dhiirrigeliyo rootiga la fidin karo iyo kuwa la saadaalin karo, waxaan ku talineynaa madax iyo jir. Madaxyada toastada ayaa isticmaala display: flex, taasoo u oggolaanaysa in si sahlan loo waafajiyo nuxurka iyada oo ay ugu wacan tahay isticmaalkayada margin iyo flexbox.

Roodhiyadu waa kuwo dabacsan sida aad u baahan tahay waxayna leeyihiin calaamado aad u yar oo loo baahan yahay. Ugu yaraan, waxaanu u baahanahay hal shay si uu u koobo nuxurkaaga “toasted” oo aanu si adag u dhiirigelino badhanka cayrinta.

Hello, adduunyo! Tani waa fariin rooti ah.

<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

Roodhisyadu wax yar bay ka turjumayaan, sidaas darteed waxay isku daraan wax kasta oo laga yaabo inay soo baxaan. Darowsarrada taageera backdrop-filterhantida CSS, waxa aanu sidoo kale isku dayi doonaa in aanu kala saarno canaasirta rootiga.

Hello, adduunyo! Tani waa fariin rooti ah.

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

Is dulsaarid

Marka aad haysato rootiyaal badan, waxaanu kuugu soo ururinay si toos ah si la akhriyi karo.

Bal eeg? Sidan oo kale.

Madaxa kor u kaca, rootiga rootiga ayaa si toos ah u soo uruurin doona

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

Meelaynta

Ku rid rooti rooti ah oo leh CSS caado ah sida aad ugu baahan tahay. Midigta sare waxaa badanaa loo istcimaalaa ogeysiisyada, sida dhexda sare. Haddii aad waligaa tusinayso hal rooti markiiba, habaynta meelaynta si sax ah u dhig .toast.

Hello, adduunyo! Tani waa fariin rooti ah.

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

Nidaamyada soo saara ogeysiisyo badan, ka fiirso isticmaalka walxaha duuban si ay si sahal ah isugu dhejiyaan.

Bal eeg? Sidan oo kale.

Madaxa kor u kaca, rootiga rootiga ayaa si toos ah u soo uruurin doona

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

Waxa kale oo aad ku heli kartaa qurux adigoo isticmaalaya flexbox utilities si aad isugu toosiso rootiga jiifka iyo/ama toosan.

Hello, adduunyo! Tani waa fariin rooti ah.

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

Helitaanka

Toasts waxaa loogu talagalay inay u noqoto carqalado yaryar oo soo booqda ama isticmaalayaashaada, si aad u caawiso kuwa leh akhristayaasha shaashadda iyo tignoolajiyada la midka ah ee caawinta, waa inaad ku duubtaa rootigaaga aria-livegobolka . Isbeddellada ku yimaadda gobollada nool (sida duritaanka/cusboonaysiinta qaybta rootiga) ayaa si toos ah loogu dhawaaqaa akhristayaasha shaashadda iyaga oo aan u baahnayn in ay dhaqaajiyaan diiradda adeegsadaha ama haddii kale ay carqaladeeyaan isticmaalaha. Intaa waxaa dheer, ku dar aria-atomic="true"si loo hubiyo in rootiga oo dhan mar walba loogu dhawaaqo halbeeg (atomic), halkii lagu dhawaaqi lahaa waxa la bedelay (taas oo keeni karta dhibaatooyin haddii aad kaliya cusboonaysiiso qayb ka mid ah rootiga rootiga, ama haddii aad soo bandhigto isla nuxurka rootiga waqti dambe). Haddii macluumaadka loo baahan yahay ay muhiim u tahay geeddi-socodka, tusaale ahaan liiska khaladaadka qaab ahaan, ka dib isticmaal qaybta digniintahalkii rooti lagu dubay.

Ogsoonow in gobolka nooli uu u baahan yahay inuu ku jiro calaamadaynta ka hor inta aan rootiga la soo saarin ama la cusboonaysiin. Haddii aad si firfircoon u soo saarto labadaba isku mar oo aad ku durto bogga, guud ahaan laguma dhawaaqi doono tignoolajiyada caawinta.

Waxaad sidoo kale u baahan tahay inaad la qabsato heerka roleiyo aria-liveiyadoo ku xiran nuxurka. Haddii ay tahay fariin muhiim ah sida qaladka, isticmaal role="alert" aria-live="assertive", haddii kale isticmaal role="status" aria-live="polite"sifooyinka.

Maaddaama waxa aad soo bandhigaysaa ay isbeddelayaan, hubi inaad cusboonaysiiso delaywakhtiga si aad u hubiso in dadku ay haystaan wakhti ku filan oo ay ku akhriyaan rootiga.

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

Markaad isticmaalayso autohide: false, waa inaad kudartaa badhanka u dhow si aad ugu ogolaato isticmaalayaasha inay joojiyaan rootiga.

Hello, adduunyo! Tani waa fariin rooti ah.

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

Dhaqanka JavaScript

Isticmaalka

Ku bilow rootiga JavaScript:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Magaca	Nooca	Asal ahaan	Sharaxaada
animation	booliyan	run	Codso u gudbida libdhicida CSS ee rootiga
isqarxi	booliyan	run	Si otomaatig ah u qari rootiga
dib u dhac	tirada	`500`	Dib u dhig qarinta rootiga (ms)

Hababka

Hababka iyo kala-guurka aan isku midka ahayn

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .

`$().toast(options)`

Wuxuu ku lifaaqaa maamule rooti ururinta walxaha.

`.toast('show')`

Waxay daaha ka qaadaysaa rootiga curiyaha Ku soo noqoshada soo wacaha ka hor inta aan rootiga la tusin (tusaale ka hor inta aysan shown.bs.toastdhacdada dhicin). Waa inaad gacanta ku wacdaa habkan, beddelka rootigaagu ma muujin doono.

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

`.toast('hide')`

Waxay qarisaa rootiga curiyaha Ku soo noqoshada soo wacaha ka hor inta aan rootiga la qarinin (tusaale ka hor inta aysan hidden.bs.toastdhacdada dhicin). Waa inaad gacanta ku wacdaa habkan haddii aad autohidesamaysay false.

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

`.toast('dispose')`

Waxay qarisaa rootiga curiyaha Rootigaagu wuxuu ku sii jirayaa DOM laakiin mar dambe ma muujin doono.

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

Dhacdooyinka

Nooca Dhacdada	Sharaxaada
tuso.bs. rooti	Dhacdadani waxay isla markaaba gubataa marka `show`habka tusaalaha la yiraahdo.
la tusay.bs. rooti	Dhacdadan waxa la eryaa marka rootiga la arkay isticmaaluhu.
qari.bs. rooti	Dhacdadan ayaa isla markaaba la eryaa marka `hide`habka tusaale ahaan loo waco.
qarsoon.bs. rooti	Dhacdadan waxa la eryaa marka rootigu dhammeeyo in laga qariyo isticmaalaha.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})