Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
in English

Iithowusti

Izaziso zokutyhala kubatyeleli bakho ngethowusti, umyalezo okhaphukhaphu kunye nowenziwa lula ngokwezifiso.

Kweli phepha

Iithowusti zizaziso ezikhaphukhaphu eziyilelwe ukulinganisa izaziso eziye zathandwa ziinkqubo eziphathwayo eziphathwayo kunye nedesktop. Zakhiwe nge-flexbox, ngoko kulula ukuzilungelelanisa kunye nokuma.

Isishwankathelo

Izinto omawuzazi xa usebenzisa iplagi ye-toast:

  • Iithowusti zingenile ngenxa yezizathu zokusebenza, ke kufuneka uziqalise ngokwakho .
  • Iithowusti ziya kuzifihla ngokuzenzekelayo ukuba awukhankanyi autohide: false.
Isiphumo soopopayi seli candelo sixhomekeke prefers-reduced-motionkumbuzo wemidiya. Jonga icandelo leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .

Imizekelo

Isiseko

Ukukhuthaza i-toasts eyandisiweyo kwaye iqikeleleka, sincoma i-header kunye nomzimba. Sebenzisa iiheader ze-toast display: flex, ezivumela ulungelelwaniso olulula lomxholo enkosi kumda wethu kunye nezinto eziluncedo zebhokisi.

Iithowusti zibhetyebhetye njengoko ufuna kwaye zinophawu oluncinci olufunekayo. Ubuncinci, sifuna into enye ukuqulatha umxholo wakho "ogxothiweyo" kwaye ukhuthaze ngamandla ukukhupha iqhosha.

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>
Ngaphambili, izikripthi zethu zongeze .hideiklasi ukuba ifihle ngokupheleleyo i-toast (nge display:none, kunokuba nje nge opacity:0). Oku ngoku akusafuneki. Nangona kunjalo, ngokuhambelana nokubuyela umva, iskripthi sethu siya kuqhubeka nokuguqula iklasi (nangona kungekho mfuneko isebenzayo) kude kube yinguqulelo enkulu elandelayo.

Umzekelo ophilayo

Cofa iqhosha elingezantsi ukubonisa i-toast (ebekwe kunye nezinto eziluncedo kwikona esezantsi ekunene) efihlwe ngokungagqibekanga.

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

Sisebenzisa le JavaScript ilandelayo ukuze siqalise idemo yethu ye-toast ephilayo:

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

    toast.show()
  })
}

Translucent

Iithowusti ziguquguquka kancinane ukuze zidityaniswe noko kungaphantsi kwazo.

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>

Ukupakisha

Uyakwazi ukupakisha iitosti ngokuzisonga kwisitya setosti, esiya kuthi ngokuthe nkqo songeze izithuba.

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>

Umxholo oqhelekileyo

Yenza ngokwezifiso iithowusti zakho ngokususa amacandelwana, uwadibanise nezinto eziluncedo , okanye ngokongeza owakho uphawu. Apha senze i-toast elula ngokususa okungagqibekanga .toast-header, ukongeza i-icon yokufihla isiko kwi- Icons ye-Bootstrap , kunye nokusebenzisa ezinye izinto ze- flexbox ukulungelelanisa uyilo.

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>

Kungenjalo, unokongeza ulawulo olongezelelweyo kunye nezixhobo kwiitosti.

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>

Izikimu zemibala

Ukwakha kulo mzekelo ungasentla, unokwenza amacebo ombala we-toast ahlukeneyo ngombala wethu kunye nezixhobo zangasemva . Apha songeze .text-bg-primarykwi .toast, kwaye emva koko songeze .btn-close-whitekwiqhosha lethu lokuvala. Ngomda ococekileyo, sisusa umda ongagqibekanga nge .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>

Ukubekwa

Beka iithowusti ngeCSS yesiko njengoko uzifuna. Ilungelo eliphezulu lisoloko lisetyenziselwa izaziso, njengoko kunjalo ngombindi ophezulu. Ukuba uza kubonisa ithowusti enye ngexesha, beka izimbo zokubeka kanye kwi- .toast.

I-Bootstrap Imizuzu eyi-11 eyadlulayo
Molo Lizwe! Lo ngumyalezo we-toast.
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>

Kwiisistim ezenza izaziso ezininzi, cinga ukusebenzisa into yokusonga ukuze zibe nokupakisha ngokulula.

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>

Unokufumana fancy nge-flexbox utility ukulungelelanisa iithowusti ngokuthe tye kunye/okanye ngokuthe nkqo.

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>

Ukufikeleleka

Iithowusti zenzelwe ukuba zibe sisiphazamiso esincinci kubatyeleli bakho okanye abasebenzisi, ke ukunceda abo banabafundi besikrini kunye nobuchwepheshe obuncedisayo obufanayo, kuya kufuneka usongele iithowusti zakho aria-livekwingingqi . Utshintsho kwimimandla ephilayo (efana nokutofa/ukuhlaziya icandelo le-toast) zibhengezwa ngokuzenzekelayo ngabafundi besikrini ngaphandle kokufuna ukususa ugxininiso lomsebenzisi okanye ngenye indlela ukuphazamisa umsebenzisi. Ukongeza, bandakanya aria-atomic="true"ukuqinisekisa ukuba yonke i-toast isoloko ibhengezwa njengeyunithi enye (yeathomu), kunokuba ubhengeze into etshintshileyo (enokukhokelela kwiingxaki ukuba uhlaziya kuphela inxalenye yomxholo we-toast, okanye ukuba ubonisa umxholo we-toast efanayo. kwixesha elizayo). Ukuba ulwazi olufunekayo lubalulekile kwinkqubo, umz. kuluhlu lweempazamo kwifom, ngoko sebenzisa icandelo lesilumkiso .endaweni ye-toast.

Qaphela ukuba ummandla ophilayo kufuneka ubekho kwi-markup ngaphambi kokuba i-toast yenziwe okanye ihlaziywe. Ukuba uvelisa zombini ngexesha elinye kwaye uzifake kwiphepha, azisayi kubhengezwa buchwephesha obuncedisayo.

Kufuneka kwakhona uhlengahlengise umgangatho rolekunye aria-livenenqanaba ngokuxhomekeke kumxholo. Ukuba ngumyalezo obalulekileyo njengempazamo, sebenzisa role="alert" aria-live="assertive", kungenjalo sebenzisa role="status" aria-live="polite"iimpawu.

Njengoko umxholo owubonisayo utshintsha, qiniseka ukuba uhlaziya delayixesha lokuvala ukuze abasebenzisi babe nexesha elaneleyo lokufunda ithowusti.

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

Xa usebenzisa autohide: false, kufuneka wongeze iqhosha lokuvala ukuvumela abasebenzisi ukuba bagxothe i-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>

Ngelixa ngokobuchwepheshe kunokwenzeka ukongeza ulawulo olunogxininiso/olunokuqhutywa (njengamaqhosha ongezelelweyo okanye amakhonkco) kwithosti yakho, kufuneka ukuphephe ukwenza oku ngokuzifihla iithowusti. Nokuba unika i-toast ixesha elide , abasebenzisi delaybekhibhodi kunye nabancedisi bobuchwepheshe banokukufumanisa kunzima ukufikelela kwi-toast ngexesha lokuthatha inyathelo (ekubeni iithowusti zingafumani ngqwalasela xa ziboniswa). Ukuba ngokuqinisekileyo kufuneka ube nolawulo olulongezelelweyo, sincoma ukusebenzisa i-toast nge autohide: false.

CSS

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, iithowusti ngoku zisebenzisa iiguquguquko ze-CSS zasekhaya .toastukuze kuphuculwe ukwenziwa ngokwezifiso kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

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

Iinguqu zeSass

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

Ukusetyenziswa

Qalisa iithowusti ngeJavaScript:

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

Izichukumisi

Ukugxothwa kunokufezekiswa datangophawu olukwiqhosha ngaphakathi kwethowusti njengoko kubonisiwe ngezantsi:

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

okanye kwiqhosha elingaphandle kwethowusti usebenzisa oku data-bs-targetkubonisiwe ngezantsi:

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

Iinketho

Njengoko iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript, unokongeza igama lokhetho ku data-bs-, njengakwi data-bs-animation="{value}". Qinisekisa ukuba utshintshe uhlobo lwecala legama lokukhetha ukusuka kwi " camelCase " ukuya kwi " kebab-case " xa udlula iinketho ngeempawu zedatha. Umzekelo, sebenzisa data-bs-custom-class="beautifier"endaweni ye- data-bs-customClass="beautifier".

Ukusukela kwi-Bootstrap 5.2.0, onke amacandelo axhasa umlinganiso wedatha ogciniweyo wovavanyodata-bs-config onokubeka uqwalaselo lwecandelo olulula njengomtya we-JSON. Xa into ineempawu data-bs-config='{"delay":0, "title":123}'kunye data-bs-title="456"neempawu, ixabiso lokugqibela titleliya kuba 456kunye neempawu zedatha eyahlukileyo ziya kuwenza ngaphezulu amaxabiso anikiweyo data-bs-config. Ukongeza, iimpawu zedatha ezikhoyo ziyakwazi ukubeka ixabiso le-JSON njenge data-bs-delay='{"show":0,"hide":150}'.

Igama Uhlobo Ukuhlala kukho Inkcazo
animation boolean true Faka inguqu ye-CSS fade kwi-toast.
autohide boolean true Fihla ngokuzenzekelayo i-toast emva kokulibaziseka.
delay inani 5000 Libazise ngeemilliseconds phambi kokufihla ithowusti.

Iindlela

Iindlela ze-Asynchronous kunye notshintsho

Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .

Jonga uxwebhu lwethu lweJavaScript ngolwazi olungakumbi .

Indlela Inkcazo
dispose Ifihla ithowusti yento. I-toast yakho iya kuhlala kwi-DOM kodwa ayisayi kuphinda ibonakale.
getInstance Indlela ye -Static ekuvumela ukuba ufumane umzekelo we-toast ohambelana nento ye-DOM.
Umzekelo: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Ibuyisela umzekelo we-Bootstrap toast.
getOrCreateInstance Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo we-toast onxulunyaniswa nento yeDOM, okanye wenze entsha, ukuba ayikhange iqalwe.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Ibuyisela umzekelo we-Bootstrap toast.
hide Ifihla ithowusti yento. Ubuyela kumnxeba phambi kokuba ithowusti ifihliwe (okt phambi kokuba hidden.bs.toastisiganeko senzeke). Kuya kufuneka ufowunele le ndlela ngesandla ukuba autohideuyenzile false.
isShown Ibuyisela i-boolean ngokwemeko yokubonakala kwe-toast.
show Ityhila ithowusti yento. Ibuyela kumnxeba phambi kokuba ithowusti iboniswe (okt phambi kokuba shown.bs.toastisiganeko senzeke). Kuya kufuneka ubize le ndlela ngesandla, endaweni yoko i-toast yakho ayizukuvela.

Iziganeko

Isiganeko Inkcazo
hide.bs.toast Esi siganeko sigxothwa ngokukhawuleza xa hideindlela yomzekelo ibiziwe.
hidden.bs.toast Esi siganeko sigxothwa xa i-toast igqibile ukufihlwa kumsebenzisi.
show.bs.toast Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
shown.bs.toast Esi siganeko sigxothwa xa i-toast yenziwe yabonakala kumsebenzisi. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})