Bapopovers
Mikanda mpe bandakisa mpo na kobakisa ba popovers ya Bootstrap, lokola oyo ezwami na iOS, na élément nyonso na site na yo.
Botali ya mozindo
Makambo oyo osengeli koyeba ntango ozali kosalela plugin ya popover:
- Popovers ba se fier na bibliothèque ya 3ème partie Popper pona positionnement. Esengeli otia popper.min.js liboso ya bootstrap.js to osalela
bootstrap.bundle.min.js
/bootstrap.bundle.js
oyo ezali na Popper mpo ba popovers esalaka! - Popovers esengaka plugin ya tooltip lokola dépendance.
- Soki ozali kotonga JavaScript na biso uta na source, esengi
util.js
. - Popovers ezali opt-in mpo na ba raisons ya performance, yango wana esengeli o initialiser yango yo moko .
- Zéro-longueur
title
na bacontent
valeurs eko lakisa jamais popover. - Boyebisa
container: 'body'
pona ko éviter ba problèmes ya rendu na ba composants plus complexes (lokola ba groupes na biso ya entrée, ba groupes ya boutons, etc). - Ko déclencher ba popovers na ba éléments cachés ekosimba te.
- Popovers mpo na
.disabled
todisabled
ba éléments esengeli e déclenché na élément ya enveloppe. - Ntango ebandisami uta na ba ancres oyo ezingami na milɔngɔ mingi, ba popovers ekozala na katikati kati na bonene mobimba ya ba ancres. Salelá
.text-nowrap
na s na yo<a>
mpo na koboya ezaleli oyo. - Esengeli kobomba ba popovers avant ba éléments correspondants na yango elongolama na DOM.
- Popovers ekoki ko déclenché grâce na élément moko na kati ya DOM ya ombre.
prefers-reduced-motion
requête ya média. Tala
eteni ya mouvement réduit ya mikanda na biso ya accessibilité .
Koba kotanga mpo na komona ndenge nini ba popovers esalaka na mwa bandakisa.
Ndakisa: Kofungola ba popovers bisika nyonso
Lolenge moko ya ko initialiser ba popovers nionso na page moko ekozala pona yango na data-toggle
attribut na yango:
$(function () {
$('[data-toggle="popover"]').popover()
})
Ndakisa: Kosalela container
option
Ntango ozali na mwa ba styles na élément parent oyo e interférer na popover, okolinga ko préciser personnalisé container
mpo HTML ya popover ebima na kati ya élément wana na esika na yango.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Ndakisa
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Ba direction minei
Ba options minei ezali: likolo, na loboko ya mobali, na nse, mpe na loboko ya mwasi.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
Bolongola na clic oyo elandi
Salelá focus
déclencheur mpo na koboya ba popovers na clic oyo elandi ya mosaleli ya élément ekeseni na élément ya kobalusa.
Marquage spécifique esengeli mpo na dismiss-on-next-click
Mpo na etamboli malamu ya croix-navigateur mpe cross-plateforme, osengeli kosalela <a>
tag, tag te , <button>
mpe osengeli mpe kotia tabindex
attribut.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
trigger: 'focus'
})
Ba éléments oyo ekangami
Ba éléments oyo ezali na disabled
attribut ezali interactif te, elingi koloba ba usagers bakoki ko hover to ko cliquer yango te pona ko déclencher popover (to tooltip). Lokola solution, okolinga ko déclencher popover à partir ya enveloppe <div>
to <span>
pe ko override the pointer-events
na élément désactivé.
Mpo na ba déclencheur ya popover oyo ekangami, okoki mpe kolinga data-trigger="hover"
mpo ete popover ebima lokola makanisi ya komona ya mbala moko epai ya basaleli na yo lokola bakoki kozela te kofina na eleman oyo ekangami.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Kosalela yango
Bofungola ba popovers na nzela ya JavaScript:
$('#example').popover(options)
Accélération ya GPU
Popovers tango mosusu emonanaka flou na ba appareils Windows 10 en raison ya accélération ya GPU na DPI ya système modifié. Solution ya likambo oyo na v4 ezali ya ko désactiver accélération ya GPU ndenge esengeli na ba popovers na yo.
Likambo oyo bapesi mpo na kobongisa yango:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Kosala ba popovers esalaka pona ba usagers ya clavier na technologie ya assistance
Pona ko permettre ba usagers ya clavier ba activer ba popovers na yo, esengeli obakisa yango kaka na ba éléments HTML oyo traditionnellement ezalaka focusable na clavier pe interactif (lokola ba liens to ba contrôles ya formulaire). Atako ba éléments HTML arbitraires (lokola <span>
s) ekoki kosalama focusable na kobakisa tabindex="0"
attribut, yango ekobakisa ba arrêts ya onglet potentiellement dérangeant mpe confusion na ba éléments non interactifs mpo na ba usagers ya clavier, mpe ba technologies mingi ya assistance na tango oyo esakolaka te contenus ya popover na situation oyo . En plus, ko se fier kaka te hover
comme déclencheur ya ba popovers na yo, po yango ekosala que ezala impossible ya ko déclencher pona ba usagers ya clavier.
Atako okoki kokɔtisa HTML ya bozwi, oyo ebongisami malamu na kati ya bapopovers na nzela ya html
kopona, tozali kolendisa yo makasi ete oboya kobakisa motángo ya makambo oyo eleki ndelo. Lolenge ba popovers esalaka lelo oyo ezali ete, mbala moko elakisami, makambo na yango ekangami na élément déclencheur na aria-describedby
attribut. Yango wana, mobimba ya makambo ya popover ekoyebisama na basaleli ya tekiniki ya kosunga lokola ebale moko molai, oyo ekatanaki te.
En plus, atako ezali possible mpe ko inclure ba contrôles interactifs (lokola ba éléments ya formulaire to ba liens) na popover na yo (na kobakisa ba éléments oyo na ba whiteList
attributs mpe ba balises to oyo epesami nzela), yeba que na tango oyo popover e gérer ordre ya focus ya clavier te. Ntango mosaleli ya klaviatware afungolaka popover, focus etikalaka na élément déclencheur, mpe lokola popover mbala mingi elandaka mbala moko déclencheur te na structure ya mokanda, garantie ezali te que kokende liboso/kofinaTABekokende na mosaleli ya clavier na kati ya popover yango moko. Na mokuse, kobakisa kaka ba contrôles interactifs na popover ezali probablement kosala que ba contrôles wana ezala inconstable/inutilisable mpo na ba usagers ya clavier mpe ba usagers ya ba technologies d’assistance, to au moins kosala ordre ya focus global illogique. Na makambo oyo, kanisá kosalela na esika na yango dialogue modal.
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=""
.
sanitize
,
sanitizeFn
mpe
whiteList
ba options ekoki kopesama te na kosalelaka ba attributs ya ba données.
Nkombo | Lolenge | Mbeba | Ndimbola |
---|---|---|---|
animation ya kosala | boolean | ya solo | Salelá transition ya fade ya CSS na popover |
eloko oyo batyaka na kati | molongo ya molongo | élément | lokuta | lokuta | Ebakisi popover na élément moko ya sikisiki. Ndakisa: |
makambo eza na kati | molongo ya molongo | élément | mosala | '' . | Valeur ya contenus par défaut soki Soki fonction moko epesami, ekobenga yango na |
kozelisa | motango | moto ya likambo | 0. | Retard ya kolakisa pe kobomba popover (ms) - etali te type ya déclencheur manuel Soki nimero moko epesami, retard esalemi na nyonso mibale kobomba/lakisa Bokeli ya eloko ezali: |
html | boolean | lokuta | Kotisa HTML na kati ya popover. Soki ezali lokuta, méthode ya jQuery text ekosalelama mpo na kokotisa makambo na DOM. Salelá makomi soki ozali komitungisa mpo na ba attaques ya XSS. |
esika ya kotya yango | molongo ya molongo | mosala | 'malamu' | Ndenge nini ko positionner popover - auto | likolo ya likolo | na nse | na gauche | malamu. Tango fonction esalelami pona koyeba placement, ebengami na node popover DOM lokola argument na yango ya liboso pe élément déclencheur node DOM lokola ya mibale na yango. Contexte |
moponi | molongo ya molongo | lokuta | lokuta | Soki moponi epesami, biloko ya popover ekopesama na ba cibles oyo elakisami. Na pratique, yango esalelamaka pona ko permettre ba contenus HTML dynamiques ezala na ba popovers oyo ebakisami. Talá oyo mpe ndakisa moko oyo ezali kopesa makambo mingi . |
modèle ya kosala | shene | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML ya kosalela tango ya kosala popover. Ba popover's Ba popover's
Elemento ya enveloppe ya libanda esengeli kozala na |
titre | molongo ya molongo | élément | mosala | '' . | Valeur ya titre par défaut soki Soki fonction moko epesami, ekobenga yango na |
kobandisa | shene | 'cliquez'. | Ndenge nini popover ebandi - finá | kosala hover | focus | mokanda. Okoki koleka ba déclencheur ebele; kokabola bango na esika moko. manual ekoki kosangisama te na déclencheur mosusu. |
offset ya kosala | motango | shene | 0. | Offset ya popover par rapport na cible na yango. Mpo na koyeba makambo mingi tala Docs ya offset ya Popper . |
fallbackKotia na esika ya mosala | molongo ya molongo | array | 'kobalusa' | Tika kolakisa position nini Popper akosalela na fallback. Mpo na koyeba makambo mingi tala ba docs ya bizaleli ya Popper |
Classe ya momesano | molongo ya molongo | mosala | '' . | Bakisa ba classes na popover tango elakisami. Yeba ete ba classes oyo ekobakisama en plus ya ba classes nionso oyo elakisami na modèle. Mpo na kobakisa bakelasi mingi, kabola yango na bisika: Okoki mpe koleka fonction oyo esengeli kozongisa molongo moko oyo ezali na ba kombo ya kelasi ya kobakisa. |
ndelo ya mboka | molongo ya molongo | eloko | 'moboti ya défilement'. | Débordement contrainte frontière ya popover. Endimi motuya ya 'viewport' , 'window' , 'scrollParent' , to référence ya HTMLElement (JavaScript kaka). Mpo na koyeba makambo mingi tala mikanda ya PreventOverflow ya Popper . |
kosala sanitisation | boolean | ya solo | Activer to désactiver sanitisation. Soki activé 'template' , 'content' na ba 'title' options ekozala sanitisé. Tala eteni ya sanitizer na mikanda na biso ya JavaScript . |
Liste ya pembe | moto ya likambo | Valeur ya défaut | Objet oyo ezali na ba attributs na ba balises oyo epesami nzela |
kosala sanitizeFn | null | mosala | ntina te | Awa okoki ko fournir fonction ya sanitize na yo moko. Yango ekoki kozala na ntina soki olingi kosalela bibliotɛkɛ oyo ebongisami mpo na kosala bopɛto. |
popperConfig ya kosala | null | moto ya likambo | ntina te | Mpo na kobongola configuration ya Popper ya liboso ya Bootstrap, tala configuration ya Popper |
Ba attributs ya ba données pona ba popovers moko moko
Ba options pona ba popovers moko moko ekoki na ndenge mosusu kozala précisé na nzela ya bosaleli ba attributs ya ba données, ndenge elimbolami likolo.
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 .
$().popover(options)
Initialise ba popovers pona collection ya élément.
.popover('show')
Ezali kobimisa popover ya élément moko. Ezongi na mobengi yambo popover elakisama mpenza (elingi koloba liboso ete shown.bs.popover
likambo esalema). Yango etalelami lokola “manuel” oyo ebandisaka popover. Ba Popovers oyo titre na yango na contenus na yango nionso mibale ezali zéro-longueur elakisami jamais.
$('#element').popover('show')
.popover('hide')
Ebombaka popover ya élément moko. Ezongi na mobengi yambo ete popover ebombama mpenza (elingi koloba liboso ete hidden.bs.popover
likambo esalema). Yango etalelami lokola “manuel” oyo ebandisaka popover.
$('#element').popover('hide')
.popover('toggle')
Toggles popover ya élément moko. Ezongi na mobengi yambo popover elakisama to ebombama mpenza (elingi koloba yambo ete likambo shown.bs.popover
to hidden.bs.popover
esalema). Yango etalelami lokola “manuel” oyo ebandisaka popover.
$('#element').popover('toggle')
.popover('dispose')
Ebombaka mpe ebebisaka popover ya élément moko. Popovers oyo esalela délégation (oyo esalemi na nzela ya selector
option ) ekoki kobebisama moko moko te na ba éléments déclencheur descendant.
$('#element').popover('dispose')
.popover('enable')
Epesaka popover ya élément moko makoki ya kolakisa. Popovers ezali activé par défaut.
$('#element').popover('enable')
.popover('disable')
Elongolaka makoki mpo na popover ya élément moko elakisama. Popover ekozala na makoki ya kolakisa kaka soki ezongisami na mosala.
$('#element').popover('disable')
.popover('toggleEnabled')
Toggles makoki mpo na popover ya element moko elakisama to ebombama.
$('#element').popover('toggleEnabled')
.popover('update')
Mikolo oyo position ya popover ya élément moko.
$('#element').popover('update')
Makambo oyo esalemaki
Lolenge ya likambo | Ndimbola |
---|---|
elakisaka.bs.popover | Evenement oyo ezo beta mbala moko tango show méthode ya instance ebengami. |
elakisami.bs.bobola | Evenement oyo ezo beta tango popover esalemi visible na mosaleli (ekozela ba transitions ya CSS esila). |
bomba.bs.bobola | Evenement oyo ezo beta mbala moko tango hide méthode ya instance ebengami. |
ebombami.bs.bobola | Evenement oyo ezo beta tango popover esili kobombama na mosaleli (ekozela ba transitions ya CSS esila). |
ekotisami.bs.bobola | Evenement oyo ezo bengana sima ya show.bs.popover événement tango modèle ya popover ebakisami na DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})