Iithowusti
Izaziso zokutyhala kubatyeleli bakho ngethowusti, umyalezo okhaphukhaphu kunye nowenziwa lula ngokwezifiso.
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
.
prefers-reduced-motion
kumbuzo 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.
<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>
Phila
Cofa iqhosha elingezantsi ukubonisa i toast (ebekwe ngezixhobo zethu kwikona esezantsi ekunene) ebifihlwe ngokungagqibekanga nge .hide
.
<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 hide" 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>
Translucent
Iithowusti ziguquguquka kancinane ukuze zidityaniswe noko kungaphantsi kwazo.
<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.
<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.
<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.
<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-primary
kwaye .text-white
kwi- .toast
, kwaye songeze .btn-close-white
kwiqhosha lethu lokuvala. Ngomda ococekileyo, sisusa umda ongagqibekanga nge .border-0
.
<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
.
<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.
<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.
<!-- 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-live
kwingingqi . 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 role
kunye aria-live
nenqanaba 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 delay
ixesha 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.
<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 delay
bekhibhodi 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(0, 0, 0, .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(0, 0, 0, .05);
Ukusetyenziswa
Qalisa iithowusti ngeJavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
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 .
bonisa
Ityhila ithowusti yento. Ibuyela kumnxeba phambi kokuba ithowusti iboniswe (okt phambi kokuba shown.bs.toast
isiganeko 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.toast
isiganeko senzeke). Kuya kufuneka ufowunele le ndlela ngesandla ukuba autohide
uyenzile false
.
toast.hide()
lahla
Ifihla ithowusti yento. I-toast yakho iya kuhlala kwi-DOM kodwa ayisayi kuphinda ibonakale.
toast.dispose()
getInstance
Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wokuskrola onxulunyaniswa nento yeDOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wokuskrola onxulunyaniswa nento yeDOM, okanye wenze entsha ukuba ayikhange iqalwe.
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...
})