Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

Gishiri

Tura sanarwar zuwa ga baƙi tare da abin yabo, saƙon faɗakarwa mai sauƙi kuma mai sauƙin daidaitawa.

A wannan shafi

Toasts sanarwa ne masu nauyi da aka tsara don kwaikwayi sanarwar turawa waɗanda tsarin aiki na hannu da tebur suka shahara. An gina su da flexbox, don haka suna da sauƙin daidaitawa da matsayi.

Dubawa

Abubuwan da ya kamata ku sani lokacin amfani da toast plugin:

  • Toasts suna shiga saboda dalilan aiki, don haka dole ne ka fara su da kanka .
  • Toasts zai ɓoye ta atomatik idan ba ku ƙayyade ba autohide: false.
Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

Misalai

Na asali

Don ƙarfafa abubuwan da za a iya faɗi da kuma abin da za a iya faɗi, muna ba da shawarar kai da jiki. Ana amfani da masu kai na toast display: flex, suna ba da damar daidaita abun ciki cikin sauƙi godiya ga gefen mu da kayan aikin flexbox.

Toasts suna da sassauƙa kamar yadda kuke buƙata kuma suna da ƙarancin alamar da ake buƙata. Aƙalla, muna buƙatar kashi ɗaya don ƙunshe da abun cikin "toasted" da ƙarfafa maɓallin korar.

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>
A baya can, rubutun mu yana ƙara .hideajin don ɓoye abin yabo gaba ɗaya (tare da display:none, maimakon tare da kawai opacity:0). Wannan yanzu bai zama dole ba kuma. Koyaya, don dacewa da baya, rubutun mu zai ci gaba da jujjuya ajin (ko da yake babu buƙatar aiki da shi) har zuwa babban siga na gaba.

Misali mai rai

Danna maɓallin da ke ƙasa don nuna abin toast (matsayi tare da kayan aikin mu a cikin ƙananan kusurwar dama) wanda aka ɓoye ta tsohuwa.

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

Muna amfani da JavaScript mai zuwa don jawo demo toast ɗin mu:

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

    toast.show()
  })
}

Translucent

Toasts suna da ɗan haske don haɗuwa tare da abin da ke ƙasa.

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>

Tari

Za ku iya tara toasts ta hanyar nannade su a cikin kwandon burodi, wanda zai ƙara wasu tazara a tsaye.

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>

Abun ciki na al'ada

Keɓance toast ɗin ku ta hanyar cire ƙananan sassa, tweaking su tare da kayan aiki , ko ta ƙara alamar ku. Anan mun ƙirƙiri toast mafi sauƙi ta hanyar cire tsoho .toast-header, ƙara gunkin ɓoye na al'ada daga gumakan Bootstrap , da amfani da wasu kayan aikin flexbox don daidaita shimfidar wuri.

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>

A madadin, za ku iya ƙara ƙarin sarrafawa da abubuwan haɗin gwiwa zuwa toasts.

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>

Tsarin launi

Gina kan misalin da ke sama, zaku iya ƙirƙira tsare-tsare masu launi daban-daban tare da launin mu da abubuwan amfani na baya . Anan mun ƙara .text-bg-primaryzuwa .toast, sannan mu ƙara .btn-close-whitezuwa maɓallin mu na kusa. Don ƙwaƙƙwaran gefen, muna cire tsohuwar iyaka tare da .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>

Wuri

Sanya gwangwani tare da CSS na al'ada kamar yadda kuke buƙata. Ana amfani da saman dama sau da yawa don sanarwa, kamar yadda babban tsakiya yake. Idan za ku taɓa nuna abin yabo ɗaya a lokaci ɗaya, sanya salon sakawa daidai akan .toast.

Bootstrap Minti 11 da suka gabata
Sannu Duniya! Wannan sakon gasa ne.
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>

Don tsarin da ke samar da ƙarin sanarwa, yi la'akari da amfani da abin rufewa don su iya tarawa cikin sauƙi.

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>

Hakanan zaka iya samun zato tare da kayan aikin flexbox don daidaita toasts a kwance da/ko a tsaye.

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>

Dama

Toasts an yi niyya don zama ƙananan katsewa ga baƙi ko masu amfani da ku, don haka don taimakawa waɗanda ke da masu karanta allo da makamantan fasahar taimako, ya kamata ku nannade abubuwan toast ɗinku a cikin aria-liveyanki . Canje-canje ga yankuna masu rai (kamar allura / sabunta kayan toast) ana sanar da su ta atomatik ta masu karanta allo ba tare da buƙatar motsa hankalin mai amfani ba ko kuma katse mai amfani. Bugu da ƙari, haɗa aria-atomic="true"don tabbatar da cewa ana sanar da duk abin da ake yi wa burodin a matsayin naúrar (atomic), maimakon kawai sanar da abin da aka canza (wanda zai iya haifar da matsala idan kawai kun sabunta wani ɓangare na abun ciki na toast ɗin, ko kuma idan kuna nuna irin abubuwan da kuke so. a wani lokaci na gaba). Idan bayanin da ake buƙata yana da mahimmanci ga tsari, misali don jerin kurakurai a cikin tsari, sannan yi amfani da ɓangaren faɗakarwamaimakon gurasa.

Lura cewa yankin mai rai yana buƙatar kasancewa a cikin alamar kafin a ƙirƙira ko sabunta gurasar. Idan kun samar da duka biyun a lokaci guda kuma ku cusa su cikin shafin, gabaɗaya ba za a sanar da su ta hanyar fasahar taimako ba.

Hakanan kuna buƙatar daidaitawa roleda aria-livematakin dangane da abun ciki. Idan saƙo ne mai mahimmanci kamar kuskure, yi amfani da role="alert" aria-live="assertive", in ba haka ba amfani da role="status" aria-live="polite"sifofi.

Kamar yadda abun ciki da kuke nunawa ke canzawa, tabbatar da sabunta lokacin delayƙarewa domin masu amfani su sami isasshen lokacin karanta abin toast.

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

Lokacin amfani da autohide: false, dole ne ka ƙara maɓallin kusa don ƙyale masu amfani suyi watsi da abin toast.

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>

Duk da yake a zahiri yana da yuwuwar ƙara sarrafawar mai da hankali/aiki (kamar ƙarin maɓalli ko hanyoyin haɗin gwiwa) a cikin gurasar ku, ya kamata ku guje wa yin wannan don ɓoye abubuwan toast ɗin. Ko da kun ba da burodin dogon delaylokaci , madannai da masu amfani da fasahar taimako na iya samun wahalar isa ga abin yabo a cikin lokaci don ɗaukar mataki (tun da toasts ba sa samun mai da hankali lokacin da aka nuna su). Idan tabbas dole ne ku sami ƙarin sarrafawa, muna ba da shawarar yin amfani da toast tare da autohide: false.

CSS

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, toasts yanzu suna amfani da masu canjin CSS na gida .toastdon haɓaka gyare-gyare na ainihin lokaci. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$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};

Sass masu canji

$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);

Amfani

Fara toasts ta JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Masu tayar da hankali

Ana iya samun korarwa tare da datasifa akan maɓalli a cikin gurasa kamar yadda aka nuna a ƙasa:

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

ko a kan maɓalli a waje da abin yabo ta amfani da data-bs-targetkamar yadda aka nuna a ƙasa:

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

Zabuka

Kamar yadda za a iya wuce zaɓuɓɓuka ta hanyar sifofin bayanai ko JavaScript, zaku iya ƙara sunan zaɓi zuwa data-bs-, kamar a cikin data-bs-animation="{value}". Tabbatar canza nau'in shari'ar sunan zaɓi daga " CamelCase " zuwa " kebab-case " lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, amfani data-bs-custom-class="beautifier"maimakon data-bs-customClass="beautifier".

Dangane da Bootstrap 5.2.0, duk abubuwan da aka gyara suna goyan bayan sifa da aka keɓance na gwajidata-bs-config wanda zai iya daidaita tsarin sassa mai sauƙi azaman kirtani JSON. Lokacin da kashi yana data-bs-config='{"delay":0, "title":123}'da data-bs-title="456"sifofi, titleƙimar ƙarshe za ta kasance 456kuma keɓantattun halayen bayanan za su soke ƙimar da aka bayar akan data-bs-config. Bugu da ƙari, halayen bayanan da ke akwai suna iya ɗaukar ƙimar JSON kamar data-bs-delay='{"show":0,"hide":150}'.

Suna Nau'in Default Bayani
animation boolean true Aiwatar da canjin CSS zuwa ga abin yabo.
autohide boolean true Boye gurasar ta atomatik bayan jinkirin.
delay lamba 5000 Jinkirta a cikin milli seconds kafin a ɓoye abin toast ɗin.

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani .

Hanya Bayani
dispose Yana ɓoye gurasar wani abu. Toast ɗin ku zai kasance akan DOM amma ba zai ƙara nunawa ba.
getInstance Hanyar a tsaye wacce ke ba ku damar samun misalin abin yabo mai alaƙa da abun DOM.
Misali: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Yana dawo da misalin abin yabo na Bootstrap.
getOrCreateInstance Hanyar a tsaye wacce ke ba ku damar samun misalin abin yabo da ke da alaƙa da abun DOM, ko ƙirƙirar sabo, idan ba a fara shi ba.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Yana dawo da misalin abin yabo na Bootstrap.
hide Yana ɓoye gurasar wani abu. Komawa ga mai kira kafin abin yabo ya kasance a ɓoye (watau kafin hidden.bs.toastabin ya faru). Dole ne ku kira wannan hanyar da hannu idan kun autohideyi false.
isShown Yana dawo da boolean bisa ga yanayin ganuwa.
show Ya bayyana toast ɗin kashi. Komawa ga mai kira kafin a nuna abin toast a zahiri (watau kafin shown.bs.toastabin ya faru). Dole ne ku kira wannan hanyar da hannu, maimakon abin toast ɗinku ba zai nuna ba.

Abubuwan da suka faru

Lamarin Bayani
hide.bs.toast Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
hidden.bs.toast Ana kora wannan taron lokacin da abin yabo ya gama ɓoye daga mai amfani.
show.bs.toast Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
shown.bs.toast Ana kora wannan taron lokacin da aka bayyana abin toast ga mai amfani. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})