Gishiri
Tura sanarwar zuwa ga baƙi tare da abin yabo, saƙon faɗakarwa mai sauƙi kuma mai sauƙin daidaitawa.
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
.
prefers-reduced-motion
tambayar 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.
<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>
Rayuwa
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 tare da .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
Toasts sun ɗan yi haske don haɗawa da abin da ke ƙasa.
<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.
<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>
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.
<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.
<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 launi da abubuwan amfani na baya . Anan mun ƙara .bg-primary
kuma .text-white
zuwa ga .toast
, sannan mu ƙara .btn-close-white
zuwa maɓallin mu na kusa. Don ƙwaƙƙwaran gefen, muna cire tsohuwar iyaka tare da .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>
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 kawai za ku taɓa nuna abin yabo ɗaya a lokaci ɗaya, sanya salon sakawa daidai akan .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>
Don tsarin da ke samar da ƙarin sanarwa, yi la'akari da amfani da abin rufewa don su iya tarawa cikin sauƙi.
<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>
Hakanan zaka iya samun zato tare da kayan aikin flexbox don daidaita toasts a kwance da/ko a tsaye.
<!-- 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-live
yanki . 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 role
da aria-live
matakin 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.
<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 delay
lokaci , 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
.
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: 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);
Amfani
Fara toasts ta JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-
, kamar a cikin data-bs-animation=""
.
Suna | Nau'in | Default | Bayani |
---|---|---|---|
animation |
boolean | true |
Aiwatar da canjin CSS zuwa ga abin yabo |
autohide |
boolean | true |
Boye toast ta atomatik |
delay |
lamba | 5000 |
Jinkirin ɓoye gurasar (ms) |
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 .
nuna
Ya bayyana toast ɗin kashi. Komawa ga mai kira kafin a nuna abin toast a zahiri (watau kafin shown.bs.toast
abin ya faru). Dole ne ku kira wannan hanyar da hannu, maimakon abin toast ɗinku ba zai nuna ba.
toast.show()
boye
Yana ɓoye gurasar wani abu. Komawa ga mai kira kafin abin yabo ya kasance a ɓoye (watau kafin hidden.bs.toast
abin ya faru). Dole ne ku kira wannan hanyar da hannu idan kun autohide
yi false
.
toast.hide()
jefar
Yana ɓoye gurasar wani abu. Toast ɗin ku zai kasance akan DOM amma ba zai ƙara nunawa ba.
toast.dispose()
samun Misali
Hanyar a tsaye wacce ke ba ku damar samun misalan gungurawa mai alaƙa da ɓangaren DOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
samunOrCreateInstance
Hanyar da ba ta dace ba wacce ke ba ku damar samun misalin gungurawa mai alaƙa da wani ɓangaren DOM, ko ƙirƙirar sabo idan ba a fara shi ba.
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Abubuwan da suka faru
Nau'in taron | Bayani |
---|---|
show.bs.toast |
Wannan taron yana gobara nan da nan lokacin da show aka kira hanyar misali. |
shown.bs.toast |
Ana kora wannan taron lokacin da aka bayyana abin toast ga mai amfani. |
hide.bs.toast |
Ana korar wannan taron nan da nan lokacin da hide aka kira hanyar misali. |
hidden.bs.toast |
Ana kora wannan taron lokacin da abin yabo ya gama ɓoye daga mai amfani. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})