Toostii

Beeksisa daawwattoota keessaniif toostii, ergaa akeekkachiisaa salphaa fi salphaatti dhuunfamuu danda'uun dhiibaa.

Toasts beeksisa salphaa ta'ee fi beeksisa dhiibaa sirna opereetiingii moobaayilaa fi deeskitooppiitiin beekamaa ta'e fakkeessuuf qophaa'edha. Isaanis flexbox waliin ijaaramaniiru, kanaaf walsimsiisuu fi bakka itti kaa'uun salphaadha.

Haala Waliigalaa

Wantoota yeroo toast plugin fayyadamtan beekuu qabdan:

Yoo JavaScriptutil.js keenya madda irraa ijaaraa jirta ta'e, .
Toasts sababa raawwii hojiitiin opt-in waan ta'aniif ofii keetii jalqabuu qabda .
Toostii bakka itti kaa'uuf itti gaafatamummaa akka qabdan hubadhaa.
Toasts yoo hin ifteessine ofumaan ni dhokatu autohide: false.

Bu'aan sochii qaama kanaa prefers-reduced-motiongaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali .

Fakkeenyaaf

Bu'uura

Toostii bal'ifamuu fi tilmaamamuu danda'u jajjabeessuuf, mataa fi qaama gorsina. Toast headers use display: flex, qabiyyee salphaatti qindeessuu kan hayyamu galata faayidaa margin fi flexbox keenyaa.

Toostiin hamma barbaaddetti kan jijjiiramu yoo ta'u, mallattoo barbaachisu baay'ee xiqqaa qaba. Yoo xiqqaate, qabiyyee “toasted” keessan qabachuuf elementii tokko barbaanna akkasumas button hojii irraa ari’uu cimsinee jajjabeessina.

Akkam jirtu addunyaa! Kun ergaa toostii ti.

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

Jiraachuu

Qabduu armaan gadii cuqaasuun toostii (faayidaa keenyaan golee mirgaa gadii irratti argamu) kan durtiidhaan dhokfame agarsiisuuf .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Ifa ifa ta’e

Toostiin xiqqoo kan calaqqisu waan isaan jala jiru waliin walitti makuuf.

Akkam jirtu addunyaa! Kun ergaa toostii ti.

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

Tuulamaa

Yeroo toostii hedduu qabdu, durtii haala dubbifamuu danda'uun vertikaaliin tuuluuf.

Ilaaluu? Akkuma kana qofa.

Mataa ol qabaa, toostoonni ofumaan ni tuula

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

Ramaddii

Toasts akka barbaaddetti CSS amala ta'een kaa'i. Yeroo baayyee mirga gubbaa beeksisaaf kan oolu yoo ta'u, akkuma giddu galeessaa gubbaa. Yoo yeroo tokkotti toostii tokko qofa agarsiisuuf deemte, akkaataawwan iddoo itti kaa'an sirriitti .toast.

Akkam jirtu addunyaa! Kun ergaa toostii ti.

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

Sirnoota beeksisa baay'ee maddisiisaniif, akka isaan salphaatti tuuluuf elementii marmaartuu fayyadamuu yaadaa.

Ilaaluu? Akkuma kana qofa.

Mataa ol qabaa, toostoonni ofumaan ni tuula

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

Akkasumas faayidaa flexbox waliin faashinii argachuu dandeessa toasts horizontally fi/ykn vertically qindeessuuf.

Akkam jirtu addunyaa! Kun ergaa toostii ti.

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

Dhaqqabummaa

Toostiin daawwattoota ykn fayyadamtoota keessaniif addaan ciccituu xixiqqoo ta’uuf yaadame, kanaaf warra dubbistoota iskiriinii fi teeknooloojiiwwan gargaarsaa walfakkaatan qaban gargaaruuf, toostii keessan aria-livenaannoo tokkotti marsuu qabdu . Jijjiiramni naannoowwan jiraataa (kan akka qaama toostii lilmoodhaan naqamuu/fooyyessuu) xiyyeeffannoo fayyadamaa sochoosuu ykn karaa biraatiin fayyadamaa addaan kutuu osoo hin barbaachisin dubbistoota iskiriiniitiin ofumaan labsamu. Dabalataanis, aria-atomic="true"waan jijjiirame qofa beeksisuu osoo hin taane, guutummaan toostii yeroo hunda akka yuunitii tokkootti (atomikii) akka beeksifamu mirkaneessuuf dabali (kun ammoo qabiyyee toostii gartokkee qofa yoo haaromsite, ykn qabiyyee toostii walfakkaataa yoo agarsiifte rakkoo fiduu danda'a yeroo boodaatti). Yoo odeeffannoon barbaachisu adeemsaaf barbaachisaa ta'e, fkn tarree dogoggora unkaa keessatti, sana booda qaama akeekkachiisaa fayyadamibakka toostii hin taane.

Hubadhaa naannoon kallattiin osoo toostiin hin uumamin ykn hin fooyya'iin dura mallattoo keessatti argamuu qaba. Yoo yeroo tokkotti lamaan isaanii daayinamikiidhaan maddisiistee fuula keessa galchite, akka waliigalaatti teknooloojiiwwan gargaarsaatiin hin beeksifaman.

Akkasumas qabiyyee irratti hundaa'uun sadarkaa rolefi madaqsuu qabda. aria-liveYoo ergaa barbaachisaa akka dogongoraa ta'e, fayyadami , yoo kana hin taane amaloota role="alert" aria-live="assertive"fayyadami .role="status" aria-live="polite"

Qabiyyeen ati agarsiiftu akkuma jijjiiramutti, fayyadamtoonni yeroo gahaa toostii dubbisuuf akka qabaataniif yeroo delayxumuraa haaromsuu kee mirkaneessi.

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

Yeroo autohide: false, fayyadamtoonni toostii akka gadhiisan hayyamuuf qaree cufuu dabaluu qabda.

Akkam jirtu addunyaa! Kun ergaa toostii ti.

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

Teeknikaan too'annoo xiyyeeffannoo/gochaan hojjetamuu danda'u (kan akka buttooni dabalataa ykn hidhannoo) toostii kee keessatti dabaluun kan danda'amu yoo ta'ellee, toostii ofumaan dhoksuuf kana gochuu irraa fagaachuu qabda. Even if you give the toast a long delaytimeout , fayyadamtoonni kiiboordii fi teeknooloojii gargaaraa tarkaanfii fudhachuuf yeroon toostii bira gahuun isaan rakkisuu danda'a (toostiin yeroo agarsiifaman xiyyeeffannoo waan hin arganneef). Yoo guutummaatti to'annoo dabalataa qabaachuu qabda ta'e, toostii wajjin fayyadamuu gorsina autohide: false.

Amala JaavaScript

Fayyadama

Toostii karaa JavaScript jalqabi:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-animation="".

Maqaa	Akaakuu	Durtii dha	Ibsa
sochii qaamaa (animation).	boolee	dhugaa	Ce'umsa CSS fade gara toostii irratti hojii irra oolchi
ofumaan dhoksuu	boolee	dhugaa	Auto dhoksaa toostii
boodatti hafuu	lakkoofsa	`500`	Toostii dhoksuu harkifachuu (ms) .

Malawwan

Malawwanii fi ce’umsawwan wal hin simne

Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .

Odeeffannoo dabalataaf galmee JaavaScript keenya ilaali .

`$().toast(options)`

Qabduu toostii walitti qabama elementii irratti maxxansi.

`.toast('show')`

Toostii elementii tokkoo mul'isa. Toostiin qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.toasttaatee osoo hin uumamin dura) gara waamichaatti deebi'a. Mala kana harkaan waamuu qabda, kanaa mannaa toostiin kee hin agarsiisu.

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

`.toast('hide')`

Toostii elementii tokkoo dhoksa. Toostiin qabatamaan osoo hin dhokatin dura (jechuunis hidden.bs.toasttaatee osoo hin uumamin dura) gara waamichaatti deebi'a. Yoo autohideakka false.

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

`.toast('dispose')`

Toostii elementii tokkoo dhoksa. Toostiin kee DOM irratti ni hafa garuu kana booda hin agarsiisu.

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

Taateewwan

Gosa Taatee	Ibsa
agarsiisa.bs.toast	Taatee kun yeroo `show`mala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiifame.bs.toast	Taatee kun kan dhukaafamu yeroo toostiin fayyadamaaf akka mul'atu taasifameedha.
dhoksi.bs.toostii	Taatee kun yeroo `hide`mala fakkeenyaa waamame battalumatti dhukaafama.
dhokataa.bs.toast	Taatee kun kan dhukaafamu yeroo toostiin fayyadamaa jalaa dhokfamee xumurudha.

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