Source

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 ibsine 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, mata duree 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.

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

Ifa ifa ta’e

Toostiin xiqqoo ifa waan ta’eef, waan irra mul’achuu danda’u hunda irratti ni makamu. Biraawzaroota qabeentaa CSS deeggaraniif backdrop-filter, akkasumas elementoota toostii jalatti jaamsuuf ni yaalla.

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

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

Bootstrap jedhamuun beekama 11 mins dura
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.

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

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

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 beeksisuu irra, guutummaan toostii yeroo hunda akka yuunitii tokkootti (atomikii) akka beeksifamu mirkaneessuuf dabali (kun ammoo yoo qabiyyee toostii gartokkee qofa haaromsite, ykn yoo qabiyyee toostii walfakkaataa at agarsiifte rakkoo fiduu danda'a yeroo booda ta’e). 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, namoonni yeroo gahaa toostii dubbisuuf akka qaban mirkaneessuuf delayyeroo xumuraa 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.

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

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 showmala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiifame.bs.toast Taatee kun kan dhukaafamu yeroo toostiin fayyadamaaf akka mul'atu taasifameedha.
dhoksi.bs.toostii Taatee kun yeroo hidemala 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...
})