Li-toast
Tsoela pele ho tsebiso ho baeti ba hau ka toast, molaetsa oa tlhokomeliso o bobebe ebile o ka o etsa habonolo.
Li-toasts ke litsebiso tse bobebe tse etselitsoeng ho etsisa litsebiso tsa push tse 'nileng tsa tuma ke lits'ebetso tsa mobile le tsa desktop. Li hahiloe ka flexbox, kahoo li bonolo ho ikamahanya le maemo.
Kakaretso
Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea toast:
- Haeba u theha JavaScript ea rona ho tsoa mohloling, e hloka
util.js
. - Li-toast li khetha ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
- Ka kopo hlokomela hore ke uena ea ikarabellang bakeng sa ho beha li-toast.
- Li-toast li tla ipata haeba u sa hlakise
autohide: false
.
Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motion
potso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .
Mehlala
Motheo
Ho khothaletsa li-toast tse atolositsoeng le tse ka lebelloang, re khothaletsa hlooho le 'mele. Lihlooho tsa toast li sebelisa display: flex
, li lumella ho hlophisoa habonolo ha litaba ka lebaka la lisebelisoa tsa rona tsa margin le flexbox.
Li-toast li tenyetseha ka moo u hlokang 'me li na le li-markup tse nyane haholo tse hlokahalang. Bonyane, re hloka ntho e le 'ngoe ho kenyelletsa litaba tsa hau tse "tosted" le ho khothaletsa ka matla konopo ea ho lahla.
Translucent
Li-toasts le tsona li fetoha hanyenyane, kahoo li kopanya holim'a eng kapa eng eo li ka hlahang ho eona. Bakeng sa libatli tse tšehetsang backdrop-filter
thepa ea CSS, re tla leka ho fifatsa likarolo tlas'a toast.
Stacking
Ha o na le li-toast tse ngata, re lula re li beha ka mokhoa o hlakileng.
Ho beha
Beha li-toast tse nang le CSS e tloaelehileng kamoo u li hlokang kateng. Ka holimo ka ho le letona hangata ho sebelisoa bakeng sa litsebiso, joalo ka bohareng ba holimo. Haeba u tla bontša toast e le 'ngoe feela ka nako, beha mekhoa ea ho beha hantle holim'a .toast
.
Bakeng sa litsamaiso tse hlahisang litemoso tse ngata, nahana ka ho sebelisa ntho e phuthelang e le hore li ka phutheha habonolo.
U ka boela ua ba majabajaba ka lisebelisoa tsa flexbox ho hokahanya li-toast ka holimo le/kapa ka ho otloloha.
Ho fihlella
Li-toast li reretsoe ho ba litšitiso tse nyane ho baeti kapa basebelisi ba hau, kahoo ho thusa ba nang le libali tsa skrine le mahlale a tšoanang a thusang, o lokela ho phuthela li-toast tsa hau aria-live
sebakeng se itseng . Liphetoho libakeng tse phelang (joalo ka ho kenya / ho nchafatsa karolo ea toast) li phatlalatsoa ka bo eona ke babali ba skrineng ntle le ho tsamaisa sepheo sa mosebelisi kapa ho sitisa mosebelisi ho seng joalo. Ho phaella moo, kenyelletsa aria-atomic="true"
ho netefatsa hore toast eohle e lula e phatlalatsoa e le yuniti e le 'ngoe (athomo), ho e-na le ho phatlalatsa se fetotsoeng (e leng se ka lebisang mathateng haeba u ka ntlafatsa feela karolo ea likahare tsa toast, kapa haeba u hlahisa lintho tse tšoanang tsa toast. kamora nako). Haeba lintlha tse hlokahalang li le bohlokoa bakeng sa ts'ebetso, mohlala, bakeng sa lethathamo la liphoso ka foromo, sebelisa karolo ea tlhokomeliso.sebakeng sa toast.
Hlokomela hore sebaka se phelang se hloka ho ba teng ka har'a markup pele toast e hlahisoa kapa e nchafatsoa. Haeba u li hlahisa ka bobeli ka nako e le 'ngoe' me u li kenya leqepheng, hangata li ke ke tsa phatlalatsoa ke mahlale a thusang.
U boetse u hloka ho ikamahanya le maemo role
le aria-live
boemo ho latela litaba. Haeba e le molaetsa oa bohlokoa joalo ka phoso, sebelisa role="alert" aria-live="assertive"
, ho seng joalo sebelisa role="status" aria-live="polite"
litšobotsi.
Ha litaba tseo u li bonts'ang li fetoha, etsa bonnete ba hore u nchafatsa nako ea delay
nako ho netefatsa hore batho ba na le nako e lekaneng ea ho bala toast.
Ha o sebelisa autohide: false
, o tlameha ho kenya konopo e koalang ho lumella basebelisi ho tlosa toast.
Boitšoaro ba JavaScript
Tšebeliso
Qala ho toast ka JavaScript:
Dikgetho
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-animation=""
.
Lebitso | Mofuta | Ea kamehla | Tlhaloso |
---|---|---|---|
animation | boolean | 'nete | Sebelisa phetoho ea CSS fade ho toast |
autohide | boolean | 'nete | Pata toast |
lieha | palo | 500 |
Ho lieha ho pata toast (ms) |
Mekhoa
Mekhoa ea Asynchronous le liphetoho
Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .
Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .
$().toast(options)
E hokela sesebelisoa sa toast pokellong ea lintho.
.toast('show')
E hlahisa toast ea element. E khutlela ho ea letselitseng pele toast e bontšoa (ke hore pele shown.bs.toast
ketsahalo e etsahala). U tlameha ho letsetsa mokhoa ona ka letsoho, ho fapana le hoo, toast ea hau e ke ke ea hlaha.
.toast('hide')
E pata toast ea element. E khutlela ho ea letselitseng pele toast e patiloe (ke hore pele hidden.bs.toast
ketsahalo e etsahala). U tlameha ho letsetsa mokhoa ona ka letsoho haeba u entse autohide
ho false
.
.toast('dispose')
E pata toast ea element. Toast ea hau e tla lula ho DOM empa ha e sa tla hlola e hlaha.
Liketsahalo
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
bontša.bs.toast | Ketsahalo ena e tuka hang hang ha show mokhoa oa mohlala o bitsoa. |
e bontshitsweng.bs.toast | Ketsahalo ena e ts'oaroa ha toast e entsoe hore e bonahale ho mosebelisi. |
pata.bs.toast | Ketsahalo ena e lelekoa hang hang ha hide mokhoa oa mohlala o bitsoa. |
patiloeng.bs.toast | Ketsahalo ena e ts'oaroa ha toast e qeta ho patoa ho mosebelisi. |