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:
- Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatar
util.js
. - Toasts suna shiga saboda dalilan aiki, don haka dole ne ka fara su da kanka .
- Lura cewa kai ke da alhakin sanya toasts.
- Toasts zai ɓoye ta atomatik idan ba ku ƙayyade ba
autohide: false
.
Tasirin raye-rayen wannan bangaren ya dogara ne da 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.
Translucent
Toasts suna da ɗan haske kaɗan, kuma, don haka suna haɗuwa a kan duk abin da za su iya bayyana. Ga masu bincike waɗanda ke goyan bayan backdrop-filter
kadarar CSS, za mu kuma yi ƙoƙarin ɓata abubuwan da ke ƙarƙashin abin toast.
Tari
Lokacin da kuke da toasts masu yawa, muna tsoho don tara su a tsaye ta hanyar da za a iya karantawa.
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 za ku taɓa nuna abin yabo ɗaya a lokaci ɗaya, sanya salon sakawa daidai akan .toast
.
Don tsarin da ke samar da ƙarin sanarwa, yi la'akari da amfani da abin rufewa don su iya tarawa cikin sauƙi.
Hakanan zaka iya samun zato tare da kayan aikin flexbox don daidaita toasts a kwance da/ko a tsaye.
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"
da don tabbatar da cewa ana sanar da duk abin da ake yi wa burodin a matsayin ɗaya (atomic), maimakon sanar da abin da aka canza (wanda zai iya haifar da matsaloli idan kawai kun sabunta wani ɓangare na abun ciki na toast ɗin, ko kuma idan kuna nuna irin abin da ke cikin abin toast ɗin a ciki). wani batu a cikin lokaci). 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 cikin da kuke nunawa ke canzawa, tabbatar da sabunta lokacin delay
ƙarewa don tabbatar da cewa mutane suna da isasshen lokacin karanta abin toast.
Lokacin amfani da autohide: false
, dole ne ka ƙara maɓallin kusa don ƙyale masu amfani suyi watsi da abin toast.
Halin JavaScript
Amfani
Fara toasts ta JavaScript:
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-
, kamar a cikin data-animation=""
.
Suna | Nau'in | Default | Bayani |
---|---|---|---|
tashin hankali | boolean | gaskiya | Aiwatar da canjin CSS zuwa ga abin yabo |
autoboye | boolean | gaskiya | Boye toast ta atomatik |
jinkiri | lamba | 500 |
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 .
$().toast(options)
Haɗa mai sarrafa toast zuwa tarin abubuwa.
.toast('show')
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('hide')
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('dispose')
Yana ɓoye gurasar wani abu. Toast ɗin ku zai kasance akan DOM amma ba zai ƙara nunawa ba.
Abubuwan da suka faru
Nau'in Taron | Bayani |
---|---|
nuna.bs.toast | Wannan taron yana gobara nan da nan lokacin da show aka kira hanyar misali. |
nuna.bs.toast | Ana kora wannan taron lokacin da aka bayyana abin toast ga mai amfani. |
boye.bs.toast | Ana korar wannan taron nan da nan lokacin da hide aka kira hanyar misali. |
boye.bs. toast | Ana kora wannan taron lokacin da abin yabo ya gama ɓoye daga mai amfani. |