Toost
Shyira amatangazo kubashyitsi bawe hamwe na toast, umutwaro woroshye kandi byoroshye guhinduranya ubutumwa.
Toast ni amatangazo yoroheje yagenewe kwigana amatangazo yo gusunika yakunzwe na sisitemu y'imikorere ya mobile na desktop. Zubatswe na flexbox, biroroshye rero guhuza no guhagarara.
Incamake
Ibintu ugomba kumenya mugihe ukoresheje plugin ya toast:
- Niba wubaka JavaScript yacu kuva isoko, birasaba
util.js
. - Toast irahitamo kubwimpamvu zikorwa, ugomba rero kubitangiza wenyine .
- Nyamuneka menya ko ufite inshingano zo gushyira toast.
- Toast izahita ihisha niba udasobanuye
autohide: false
.
Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motion
nibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .
Ingero
Shingiro
Kugirango dushishikarize toast yagutse kandi iteganijwe, turasaba umutwe numubiri. Imitwe ya toast ikoresha display: flex
, yemerera guhuza byoroshye ibikubiyemo dukesha margin na flexbox yingirakamaro.
Toast iroroshye guhinduka nkuko ubikeneye kandi ifite ibimenyetso bike bisabwa. Nibura, dukeneye ikintu kimwe kugirango gikubiyemo ibintu "byuzuye" kandi dushishikarize cyane buto yo kwirukana.
Birasobanutse
Toost irasobanutse gato, nayo, kuburyo ihuza ibyo aribyo byose bigaragara hejuru. Kuri mushakisha ishyigikira backdrop-filter
umutungo wa CSS, tuzagerageza kandi guhuza ibintu munsi ya toast.
Gushyira hamwe
Mugihe ufite toast nyinshi, dusanzwe duhagaritse kubitondekanya muburyo busomeka.
Gushyira
Shira toast hamwe na CSS yihariye nkuko ubikeneye. Hejuru iburyo bukoreshwa kenshi kubimenyeshwa, nkuko biri hagati. Niba ugiye gusa kwerekana toast imwe icyarimwe, shyira imiterere yuburyo buhagaze kuri .toast
.
Kuri sisitemu zitanga ibisobanuro byinshi, tekereza gukoresha ikintu cyo gupfunyika kugirango zishobore gutondeka byoroshye.
Urashobora kandi kubona ibintu byiza hamwe na flexbox yingirakamaro kugirango uhuze toast itambitse kandi / cyangwa uhagaritse.
Kuboneka
Toast igenewe kuba intambamyi ntoya kubasuye cyangwa abakoresha, kugirango rero ufashe abafite abasomyi ba ecran hamwe nikoranabuhanga risa naryo rifasha, ugomba kuzinga toast yawe aria-live
mukarere . Impinduka mukarere gatuye (nko gutera inshinge / kuvugurura ibice bya toast) birahita bitangazwa nabasomyi ba ecran bitabaye ngombwa ko wimura icyerekezo cyumukoresha cyangwa ubundi guhagarika umukoresha. Byongeye kandi, shyiramo aria-atomic="true"
kwemeza ko toast yose ihora itangazwa nkigice kimwe (atome), aho gutangaza icyahinduwe (gishobora kugutera ibibazo uramutse uvuguruye gusa igice cyibigize toast, cyangwa niba ugaragaza ibintu bimwe bya toast kuri ingingo ya nyuma mugihe). Niba amakuru akenewe ari ingenzi kubikorwa, urugero kurutonde rwamakosa muburyo, hanyuma ukoreshe ibice byo kumenyeshaaho toast.
Menya ko akarere kazima gakeneye kuba mubimenyetso mbere yuko toast ikorwa cyangwa ivugururwa. Niba ubyara umusaruro byombi icyarimwe hanyuma ukabitera kurupapuro, mubisanzwe ntabwo bizatangazwa nikoranabuhanga rifasha.
Ugomba kandi guhuza role
urwego aria-live
nurwego ukurikije ibirimo. Niba ari ubutumwa bwingenzi nkikosa, koresha role="alert" aria-live="assertive"
, ubundi ukoreshe role="status" aria-live="polite"
ibiranga.
Nkibirimo ugaragaza impinduka, menya neza kuvugurura delay
igihe kugirango abantu babone umwanya uhagije wo gusoma toast.
Mugihe ukoresha autohide: false
, ugomba kongeramo buto yegeranye kugirango wemerere abakoresha kwirukana toast.
Imyitwarire ya JavaScript
Ikoreshwa
Gutangiza toast ukoresheje JavaScript:
Amahitamo
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-
, Nka Muri data-animation=""
.
Izina | Andika | Mburabuzi | Ibisobanuro |
---|---|---|---|
animasiyo | boolean | ni ukuri | Koresha CSS igenda ihinduka kuri toast |
autohide | boolean | ni ukuri | Hisha imodoka |
gutinda | nimero | 500 |
Gutinda guhisha toast (ms) |
Uburyo
Uburyo butajegajega ninzibacyuho
Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .
$().toast(options)
Ongeraho umukoresha wa toast kubintu byegeranijwe.
.toast('show')
Kugaragaza toast yikintu. Garuka kumuhamagaye mbere yuko toast yerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.toast
ibyabaye biba). Ugomba guhamagara intoki ubu buryo, ahubwo toast yawe ntizerekana.
.toast('hide')
Hisha toast yikintu. Garuka kumuhamagara mbere yuko toast ihishwa mubyukuri (nukuvuga mbere yuko hidden.bs.toast
ibyabaye biba). Ugomba guhamagara intoki ubu buryo niba autohide
warakoze false
.
.toast('dispose')
Hisha toast yikintu. Toast yawe izaguma kuri DOM ariko ntizongera kwerekana.
Ibyabaye
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
kwerekana.bs | Ibirori birasa ako kanya mugihe show urugero rwitwa. |
yerekanwe.bs.kuri | Ibi birori birukanwa mugihe toast yakozwe kubakoresha. |
kwihisha.bs | Ibi birori birahita bisohoka mugihe uburyo hide bwurugero bwahamagawe. |
bihishe.bs.kuri | Ibirori birukanwa mugihe toast yarangije guhishwa uyikoresha. |