Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

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

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

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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>

Deemo toostii kallattiin keenya kakaasuuf JavaScript armaan gadii fayyadamna:

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

    toast.show()
  })
}

Ifa ifa ta’e

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

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

html 
<div class="toast-container position-static">
  <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.

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

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

Iskimoota halluu

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

html 
<div class="toast align-items-center text-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 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.

Bootstrap jedhamuun beekama 11 mins dura
Akkam jirtu addunyaa! Kun ergaa toostii ti.
html 
<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 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.

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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.

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

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

CSS jedhamuun beekama

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama itti dhiyaannaa jijjiiramoota CSS Bootstrap guddachaa jiranitti, toostoonni amma jijjiiramoota CSS naannoo on fayyadamuun .toastyeroo dhugaa dhuunfachiisaa fooyya'aa ta'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Jijjiiramoota Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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 waan danda'uuf, maqaa filannoo gara data-bs-, akka keessatti dabaluu dandeessa data-bs-animation="{value}". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo “ camelCase ” irraa gara “ kebab-case ” jijjiiruu kee mirkaneessi. Fakkeenyaaf, data-bs-custom-class="beautifier"bakka data-bs-customClass="beautifier".

Bootstrap 5.2.0 irraa eegalee, qaamolee hundi amaloota deetaa yaaliidata-bs-config eegame kan qindeessaa qaama salphaa akka tarree JSON qabachuu danda'u deeggaru. Yeroo qaamni tokko amaloota data-bs-config='{"delay":0, "title":123}'fi qabu data-bs-title="456", gatii dhumaa titleta'a 456fi amaloonni deetaa adda addaa gatiiwwan irratti kennaman irra darbu data-bs-config. Dabalataan, amaloonni deetaa jiran gatiiwwan JSON akka data-bs-delay='{"show":0,"hide":150}'.

Maqaa Akaakuu Durtii dha Ibsa
animation boolee true Ce'umsa CSS fade gara toostii irratti hojii irra oolchi.
autohide boolee true Erga harkifannaa booda ofumaan toostii dhoksi.
delay lakkoofsa 5000 Toostii dhoksuu dura milisekondii keessatti harkifadhu.

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 .

Mala Ibsa
dispose Toostii elementii tokkoo dhoksa. Toostiin kee DOM irratti ni hafa garuu kana booda hin agarsiisu.
getInstance Mala istaatiksii kan fakkeenya toostii elementii DOM waliin walqabate argachuuf si dandeessisu.
Fakkeenyaaf: Fakkeenya const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)toostii Bootstrap deebisa.
getOrCreateInstance Mala istaatiksii kan fakkeenya toostii elementii DOM waliin walqabate argachuuf si dandeessisu, ykn haaraa uumuuf, yoo hin jalqabne.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Fakkeenya toostii Bootstrap deebisa.
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.
isShown Akkaataa mul'achuu toostiitiin boolii deebisa.
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.

Taateewwan

Taatee Ibsa
hide.bs.toast Taatee kun yeroo hidemala fakkeenyaa waamame battalumatti dhukaafama.
hidden.bs.toast Taatee kun kan dhukaafamu yeroo toostiin fayyadamaa jalaa dhokfamee xumurudha.
show.bs.toast Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
shown.bs.toast Taatee kun kan dhukaafamu yeroo toostiin fayyadamaaf akka mul'atu taasifameedha. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})