Tositi ezifumbirwa
Push notifications to your visitors with a toast, obubaka obw’okulabula obutazitowa era obwangu okulongoosa.
Toasts bye bimanyisibwa ebizitowa ebikoleddwa okukoppa okumanyisibwa okusindika okubadde kwettanirwa enkola z’oku ssimu ne ku mmeeza. Zizimbibwa ne flexbox, kale nnyangu okuzikwataganya n’okuziteeka mu kifo.
Okulaba okutwalira awamu
Ebintu by’olina okumanya ng’okozesa toast plugin:
- Toasts zibeera opt-in olw’ensonga z’okukola obulungi, kale olina okuzitandika ggwe kennyini .
- Toasts zijja kwekweka zokka singa tolaga
autohide: false
.
prefers-reduced-motion
kubuuza kw'emikutu. Laba ekitundu
ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .
Eby’okulabirako
Kya bulijjo
Okukubiriza tositi ezigaziwa era eziteeberezebwa, tusaba omutwe n’omubiri. Toast headers use display: flex
, okusobozesa okwanguyirwa okulaganya ebirimu okwebaza margin ne flexbox utilities zaffe.
Toasts zikyukakyuka nga bwe weetaaga era zirina markup ntono nnyo eyeetaagisa. Ekitono ennyo, twetaaga ekintu kimu okubeeramu ebirimu byo “ebyokeddwa” era tukubiriza nnyo bbaatuuni y’okugoba.
<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>
Kubeera
Nywa ku bbaatuuni wansi okulaga tositi (eteekeddwa n’ebikozesebwa byaffe mu nsonda eya wansi ku ddyo) ebadde ekwekeddwa mu butonde ne .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>
Ekitangaala ekitangalijja
Tositi zitangalijja katono okutabula n’ebiri wansi wazo.
<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>
Okutunga
Osobola okuteeka tositi ng’ozizinga mu kibya kya tositi, ekijja okwongerako ebanga mu vertikal.
<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>
Ebirimu eby’enjawulo
Customize toasts zo nga oggyawo sub-components, tweaking them with utilities , oba nga ossaako markup yo. Wano tukoze toast ennyangu nga tuggyawo default .toast-header
, nga twongerako custom hide icon okuva mu Bootstrap Icons , era nga tukozesa ebimu ku flexbox utilities okutereeza layout.
<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>
Ekirala osobola n’okwongerako ebifuga n’ebitundu ebirala ku tositi.
<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>
Ensengeka za langi
Nga ozimba ku kyokulabirako ekyo waggulu, osobola okukola langi za tositi ez’enjawulo n’ebikozesebwa byaffe ebya langi n’emabega . Wano twongedde ne ku , ate oluvannyuma ne twongera ku button yaffe ey'okuggalawo. Ku lw'empenda ennyangu, tuggyawo ensalosalo esookerwako ne ..bg-primary
.text-white
.toast
.btn-close-white
.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>
Okuteekebwa mu kifo
Teeka toasts ne custom CSS nga bw'ozeetaaga. Waggulu ku ddyo atera okukozesebwa okumanyisa, nga bwe kiri waggulu wakati. Bw’oba ogenda okulaga tositi emu yokka omulundi gumu, teeka emisono gy’okuteeka mu kifo ekituufu ku .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>
Ku nkola ezikola okumanyisibwa okusingawo, lowooza ku kukozesa ekintu ekizinga zisobole okwanguyirwa okutunga.
<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>
Osobola n’okufuna fancy ne flexbox utilities okulaganya toasts horizontally ne/oba vertically.
<!-- 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>
Okutuuka ku bantu
Tositi zigendereddwamu okuba obutaataaganya obutonotono eri abagenyi bo oba abakozesa, kale okuyamba abo abalina ebisoma ku ssirini ne tekinologiya ow’enjawulo ayamba, olina okuzinga tositi zo mu aria-live
kitundu . Enkyukakyuka mu bitundu ebiramu (nga okukuba empiso/okuzza obuggya ekitundu kya tositi) zilangirirwa mu ngeri ey’otoma abasoma ku ssirini nga tekyetaagisa kutambuza kifo ky’omukozesa oba okusalako omukozesa mu ngeri endala. Okugatta ku ekyo, ssaamu aria-atomic="true"
okukakasa nti tositi yonna bulijjo elangirirwa nga yuniti emu (atomu), okusinga okulangirira kyokka ekyakyusibwa (ekiyinza okuvaako obuzibu singa otereeza ekitundu kyokka ku birimu tositi, oba singa olaga ebirimu mu tositi bye bimu mu kiseera ekiddako). Singa amawulire ageetaagisa gaba makulu eri enkola, okugeza ku lukalala lw’ensobi mu ffoomu, olwo kozesa ekitundu eky’okulabulamu kifo kya tositi.
Weetegereze nti ekitundu ekiramu kyetaaga okubaawo mu markup nga toast tennakolebwa oba okulongoosebwa. Singa okola dynamically byombi mu kiseera kye kimu n’obiyingiza mu lupapula, okutwalira awamu tebijja kulangirirwa tekinologiya ayamba.
Era olina okukyusakyusa role
ne aria-live
level okusinziira ku birimu. Bwe kiba nga bubaka bukulu nga ensobi, kozesa role="alert" aria-live="assertive"
, bwe kitaba ekyo kozesa role="status" aria-live="polite"
attributes.
Nga ebirimu by’olaga bikyuka, kakasa nti ozza obuggya delay
ekiseera ekiweddemu abakozesa basobole okufuna obudde obumala okusoma tositi.
<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>
Bw’oba okozesa autohide: false
, olina okugattako akabonero akaggalawo okusobozesa abakozesa okugoba tositi.
<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>
Wadde nga mu by’ekikugu kisoboka okwongerako ebifuga ebiyinza okussa essira/ebikolebwa (nga obutambi oba enkolagana endala) mu tositi yo, olina okwewala okukola kino ku tositi ezikweka. Ne bw’owa tositi ekiseera ekiwanvu delay
, abakozesa kiiboodi ne tekinologiya ayamba bayinza okusanga obuzibu okutuuka ku tositi mu budde okukola (okuva tositi bwe zitafuna focus nga ziragiddwa). Bw’oba ddala olina okuba n’ebifuga ebirala, tusaba okukozesa tositi ng’erina autohide: false
.
Sass nga bwe kiri
Enkyukakyuka ezikyukakyuka
$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);
Enkozesa
Tandika tositi ng'oyita mu JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Eby’okulondako
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-
, nga mu data-bs-animation=""
.
Erinnya | Okuwandiika | Okukosamu | Okunnyonnyola |
---|---|---|---|
animation |
boolean | true |
Siiga enkyukakyuka ya CSS fade ku toast |
autohide |
boolean | true |
Auto okukweka toast |
delay |
omuwendo | 5000 |
Okulwawo okukweka tositi (ms) . |
Enkola
Enkola ezitakwatagana n’enkyukakyuka
Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwa . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .
Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .
okulaga
Abikkula tositi ya elementi. Edda eri oyo akubira nga tositi tennalagibwa ddala (kwe kugamba nga shown.bs.toast
ekintu tekinnabaawo). Olina okuyita enkola eno mu ngalo, mu kifo ky’ekyo tositi yo tejja kulaga.
toast.show()
okweekweeka
Akweka tositi ya elementi. Edda eri oyo akubira nga tositi tennakwekebwa ddala (kwe kugamba hidden.bs.toast
ng’ekintu tekinnabaawo). Olina okuyita enkola eno mu ngalo singa wakola autohide
ku false
.
toast.hide()
okusuula
Akweka tositi ya elementi. Toast yo ejja kusigala ku DOM naye tegenda kuddamu kulaga.
toast.dispose()
getEkyokulabirako
Enkola ya static ekusobozesa okufuna scrollspy instance ekwatagana ne DOM element
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
funaObaTondawoEkifaananyi
Enkola ya static ekusobozesa okufuna scrollspy instance ekwatagana ne DOM element, oba okukola empya singa teyali etandikibwawo
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Ebibaddewo
Ekika ky’ekintu ekibaawo | Okunnyonnyola |
---|---|
show.bs.toast |
Ekintu kino kikuba amangu ddala nga show enkola ya instance eyitiddwa. |
shown.bs.toast |
Omukolo guno gukubwa nga tositi emaze okulabika eri oyo agikozesa. |
hide.bs.toast |
Ekintu kino kikubwa amangu ddala nga hide enkola ya instance eyitiddwa. |
hidden.bs.toast |
Omukolo guno gukubwa nga tositi emaze okukwekebwa eri oyo agikozesa. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})