Toostii

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

Fuula kana irratti

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:

Toasts sababa raawwii hojiitiin opt-in waan ta'aniif ofii keetii jalqabuu qabda .
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.

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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Duraan, iskiriiptiin keenya daayinamikiidhaan .hidedaree dabalee guutummaatti toostii dhoksuuf (with display:none, rather than just with opacity:0). Kun amma kana booda barbaachisaa miti. Haa ta'u malee, walsimsiisa duubatti deebi'uuf, iskiriiptiin keenya hanga gosa guddaa itti aanutti gita jijjiiruu itti fufa (barbaachisummaan qabatamaan jiraachuu baatus).

Fakkeenya jiraadhu

Toostii (faayidaa keenyaan golee mirgaa gadii irratti kan argamu) kan durtii dhokate agarsiisuuf button armaan gadii cuqaasaa.

Hello, world! This is a toast message.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Deemoo toostii kallattiin keenya kakaasuuf JaavaScript armaan gadii fayyadamna:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Tuulamaa

Toostii meeshaa toostii keessatti marsuudhaan walitti tuuluu dandeessa, kunis vertikaaliin addaan fageenya tokko tokko dabalata.

Ilaaluu? Akkuma kana qofa.

Mataa ol qabaa, toostoonni ofumaan ni tuula

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Qabiyyee amala

Qaamolee xiqqaa balleessuun, faayidaa waliin jijjiiruun , ykn mallattoo mataa keetii dabaluudhaan toostoota kee dhuunfachiisi. Asitti durtii balleessuun toostii salphaa uumneerra .toast-header, mallattoo dhoksaa amala Bootstrap Icons irraa dabaluudhaan , fi faayidaa flexbox tokko tokko fayyadamuun haalata sirreessuu.

Akkam jirtu addunyaa! Kun ergaa toostii ti.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Akka filannootti, too'annoo fi qaamolee dabalataa toostoota irrattis dabaluu dandeessa.

Akkam jirtu addunyaa! Kun ergaa toostii ti.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Iskiimota halluu

Fakkeenya armaan olii irratti hundaa'uun, faayidaa halluu fi duubbee keenyaan iskiimota halluu toostii adda addaa uumuu dandeessa . .bg-primaryKunoo fi .text-whitegara , irratti daballee jirra .toast, achiis .btn-close-whitebutton cufiinsa keenyatti daballeerra. Qarqara qulqulluudhaaf, daangaa durtii waliin haqna .border-0.

Akkam jirtu addunyaa! Kun ergaa toostii ti.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </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.

Akkam jirtu addunyaa! Kun ergaa toostii ti.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </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" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 labsuu osoo hin taane, guutummaan toostii yeroo hunda akka yuunitii tokkootti (atoomii) 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-bs-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-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

Sass jedhama

Jijjiiramoota

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba($black, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Fayyadama

Toostii karaa JavaScript jalqabi:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Kaka’umsa

Hojii irraa ari’uun akka armaan gadiitti dataamaloota buttooni toostii keessa jiru irratti argamuun galma ga’uu danda’a :

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

ykn buttooni toostii ala jirudata-bs-target irratti akka armaan gadiitti fayyadamuun :

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Filannoowwan

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

Maqaa	Akaakuu	Durtii dha	Ibsa
`animation`	boolee	`true`	Ce'umsa CSS fade gara toostii irratti hojii irra oolchi
`autohide`	boolee	`true`	Auto dhoksaa toostii
`delay`	lakkoofsa	`5000`	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 .

agarsiisuu

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.

toast.show()

dhoksuu

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.

toast.hide()

gatuu

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

toast.dispose()

Fakkeenya argadhu

Mala istaatiksii kan fakkeenya toostii elementii DOM waliin walqabate argachuuf si dandeessisu

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

Fakkeenya argadhuYknUumi

Mala istaatiksii kan fakkeenya toostii elementii DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Taateewwan

Gosa taatee	Ibsa
`show.bs.toast`	Taatee kun yeroo `show`mala fakkeenyaa waamamu battalumatti dhukaasa.
`shown.bs.toast`	Taatee kun kan dhukaafamu yeroo toostiin fayyadamaaf akka mul'atu taasifameedha.
`hide.bs.toast`	Taatee kun yeroo `hide`mala fakkeenyaa waamame battalumatti dhukaafama.
`hidden.bs.toast`	Taatee kun kan dhukaafamu yeroo toostiin fayyadamaa jalaa dhokfamee xumurudha.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})