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.

Molo Lizwe! Lo ngumyalezo we-toast.

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

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>

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

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

    toast.show()
  })
}

Translucent

Iithowusti ziguquguquka kancinane ukuze zidityaniswe noko kungaphantsi kwazo.

Molo Lizwe! Lo ngumyalezo we-toast.

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

'Yabona? Kanye ngolu hlobo.

Iintloko phezulu, iithowusti ziya kuzipakisha ngokuzenzekelayo

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

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.

Molo Lizwe! Lo ngumyalezo we-toast.

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

Molo Lizwe! Lo ngumyalezo we-toast.

<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 .bg-primarykwaye .text-whitekwi- .toast, kwaye songeze .btn-close-whitekwiqhosha lethu lokuvala. Ngomda ococekileyo, sisusa umda ongagqibekanga nge .border-0.

Molo Lizwe! Lo ngumyalezo we-toast.

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

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.

Molo Lizwe! Lo ngumyalezo we-toast.

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

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

'Yabona? Kanye ngolu hlobo.

Iintloko phezulu, iithowusti ziya kuzipakisha ngokuzenzekelayo

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

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

Molo Lizwe! Lo ngumyalezo we-toast.

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

Molo Lizwe! Lo ngumyalezo we-toast.

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

Sass

Izinto eziguquguqukayo

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

Ukusetyenziswa

Qalisa iithowusti ngeJavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-bs-, njengakwi data-bs-animation="".

Igama	Uhlobo	Ukuhlala kukho	Inkcazo
`animation`	boolean	`true`	Faka inguqu ye-CSS fade kwi-toast
`autohide`	boolean	`true`	Fihla ithowusti ngokuzenzekela
`delay`	inani	`5000`	Ukulibazisa ukufihla i-toast (ms)

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 .

bonisa

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.

toast.show()

fihla

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.

toast.hide()

lahla

Ifihla ithowusti yento. I-toast yakho iya kuhlala kwi-DOM kodwa ayisayi kuphinda ibonakale.

toast.dispose()

getInstance

Indlela ye -Static ekuvumela ukuba ufumane umzekelo we-toast ohambelana nento ye-DOM

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

getOrCreateInstance

Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wethowusti onxulunyaniswa nento yeDOM, okanye wenze entsha ukuba ayiqalwanga.

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

Iziganeko

Uhlobo lomsitho	Inkcazo
`show.bs.toast`	Esi siganeko sivutha ngokukhawuleza xa `show`kubizwa indlela yomzekelo.
`shown.bs.toast`	Esi siganeko sigxothwa xa i-toast yenziwe yabonakala kumsebenzisi.
`hide.bs.toast`	Esi siganeko sigxothwa ngokukhawuleza xa `hide`indlela yomzekelo ibiziwe.
`hidden.bs.toast`	Esi siganeko sigxothwa xa i-toast igqibile ukufihlwa kumsebenzisi.

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