Ba toasts ya kosala
Pusa ba notifications na ba visiteurs na yo na toast, message ya alerte ya léger et facilement personnalisable.
Toasts ezali ba notifications ya pete oyo ebongisami mpo na ko imiter ba notifications ya push oyo esili ko populariser na ba systèmes d’exploitation mobile mpe ya bureau. Batongami na flexbox, yango wana ezali pete mpo na ko aligner mpe ko positionner.
Botali ya mozindo
Makambo oyo osengeli koyeba ntango ozali kosalela plugin ya toast:
- Soki ozali kotonga JavaScript na biso uta na source, esengi
util.js
. - Ba toasts ezali opt-in mpo na ba raisons ya performance, yango wana esengeli o initialiser yango yo moko .
- Tosɛngi bino bóyeba ete bozali na mokumba ya kotya ba toast na esika na yango.
- Ba toasts ekobombama automatiquement soki olakisaki te
autohide: false
.
Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motion
requête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .
Bandakisa
Ya ntina
Mpo na kolendisa ba toasts oyo ekoki kopanzana mpe oyo ekoki kokanisama liboso, tozali kolendisa yo otya motó mpe nzoto. Toast headers use display: flex
, permettant facilement alignment ya contenus grâce na ba utilitaires na biso ya marge na flexbox.
Toasts ezali flexible ndenge osengeli na yango mpe ezali na marquage oyo esengeli mpenza moke. Na moke, tosɛngaka eloko moko mpo na kozala na makambo na yo oyo “toast” mpe kolendisa mpenza bouton ya koboya.
Ezali na translucide
Toasts ezali mwa translucent, mpe, yango wana esangani likolo ya eloko nyonso oyo ekoki komonana likolo. Mpo na ba navigateurs oyo esimbaka backdrop-filter
propriété CSS, tokomeka mpe kosala flou ya ba éléments na se ya toast.
Kosala ebele ya biloko
Tango ozali na ba toasts ebele, to défaut to empiler yango verticalement na ndenge oyo ekoki kotangama.
Botiami na esika
Botia ba toasts na CSS personnalisé ndenge bozali na besoin na yango. Mbala mingi, basalelaka likoló na lobɔkɔ ya mobali mpo na koyebisa makambo, ndenge moko mpe na katikati ya likoló. Soki okomonisa kaka mokolo mosusu toast moko na mbala moko, tyá mitindo ya kotya yango na esika oyo ebongi mpenza na .toast
.
Mpo na ba systèmes oyo ebimisaka ba notifications mingi, kanisá kosalela élément ya enveloppe mpo ete bakoka kosala stack na pete.
Okoki mpe kozwa fancy na ba utilitaires flexbox mpo na ko aligner ba toasts horizontalement mpe/to verticalement.
Kozala na makoki ya kozwa yango
Ba toasts ezali na mokano ya kozala ba interruptions ya mike mike mpo na ba visiteurs to ba usagers na yo, yango wana mpo na kosalisa ba oyo bazali na ba lecteurs d’écran mpe ba technologies ya kosunga ya ndenge wana, esengeli o envelopper ba toasts na yo na aria-live
région moko . Mbongwana na ba régions en direct (lokola ko injecter/ko mettre à jour composant ya toast) esakolamaka automatiquement na ba lecteurs d’écran sans que ezala na besoin ya ko déplacer focus ya usager to ko interrompre na ndenge mosusu. En plus, kotia aria-atomic="true"
mpo na kosala ete toast mobimba esakolama ntango nyonso lokola unité moko (atomique), na esika ya kosakola oyo ebongwanaki (oyo ekoki komema mikakatano soki ozali kaka kosala mikolo oyo ndambo ya makambo oyo ezali na toast, to soki ozali kolakisa makambo ya toast ndenge moko na ntango moko ya nsima). Soki sango oyo esengeli ezali na ntina mpo na mosala, ndakisa mpo na liste ya mabunga na formulaire moko, na nsima salelá eteni ya likebisina esika ya kosala toast.
Yeba ete région en direct esengeli ezala présente na marquage avant toast ezala généré to mise à jour. Soki o générer dynamiquement nionso mibale en même temps mpe o injecter yango na page, bakozala généralement annoncer te na ba technologies d’assistance.
Esengeli pe o adapter niveau ya role
pe aria-live
selon contenus. Soki ezali message ya ntina lokola erreur, salela role="alert" aria-live="assertive"
, soki te salela role="status" aria-live="polite"
ba attributs.
Lokola makambo oyo ozali kolakisa ezali kobongwana, kobosana te kosala mikolo oyo delay
ntango oyo esili mpo na kosala ete bato bázala na ntango oyo ekoki mpo na kotánga toast.
Ntango ozali kosalela autohide: false
, osengeli kobakisa bouton ya kokanga mpo na kopesa nzela na basaleli bábwaka toast.
Etamboli ya JavaScript
Kosalela yango
Initialiser ba toasts na nzela ya JavaScript:
Makambo oyo okoki kopona
Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-
, lokola na data-animation=""
.
Nkombo | Lolenge | Mbeba | Ndimbola |
---|---|---|---|
animation ya kosala | boolean | ya solo | Salelá transition ya fade ya CSS na toast |
autohide | boolean | ya solo | Auto kobomba toast ya kosala |
kozelisa | nimero | 500 |
Retard ya kobomba toast (ms) . |
Ba méthodes ya kosala
Ba méthodes asynchrones na ba transitions
Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .
Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .
$().toast(options)
Ezali kokangisa eloko oyo esimbaka toast na liboke ya biloko.
.toast('show')
Ezali kobimisa toast ya élément moko. Ezongi na moto oyo abengi liboso ete toast elakisama mpenza (elingi koloba liboso ete shown.bs.toast
likambo yango esalema). Il faut obenga manuellement méthode oyo, au lieu toast na yo eko lakisa te.
.toast('hide')
Ebombaka toast ya élément moko. Ezongi na moto oyo abengi liboso ete toast ebombama mpenza (elingi koloba liboso ete hidden.bs.toast
likambo yango esalema). Il faut kobenga manuellement méthode oyo soki osali autohide
na false
.
.toast('dispose')
Ebombaka toast ya élément moko. Toast na yo eko tikala na DOM mais eko lakisa lisusu te.
Makambo oyo esalemaki
Lolenge ya likambo | Ndimbola |
---|---|
elakisaka.bs.toast | Evenement oyo ezo beta mbala moko tango show méthode ya instance ebengami. |
elakisami.bs.toast | Evenement oyo ezo beta tango toast esili kosala que ezala visible na usager. |
bomba.bs.toast | Evenement oyo ezo beta mbala moko tango hide méthode ya instance ebengami. |
ebombami.bs.toast | Evenement oyo ezo beta tango toast esili kobombama na usager. |