Ama-Popovers
Amadokhumenti nezibonelo zokwengeza ama-popover e-Bootstrap, afana nalawo atholakala ku-iOS, kunoma iyiphi i-elementi kusayithi lakho.
Uhlolojikelele
Izinto okufanele uzazi uma usebenzisa i-plugin ye-popover:
- Ama-Popovers athembele kulabhulali yenkampani yangaphandle ye- Popper ukuze ibekwe. Kufanele ufake i -popper.min.js ngaphambi kwe-bootstrap.js noma usebenzise
bootstrap.bundle.min.js
/bootstrap.bundle.js
equkethe i-Popper ukuze ama-popovers asebenze! - Ama-Popovers adinga i- plugin yethiphu yamathuluzi njengokuncika.
- Ama-Popovers angena ngenxa yezizathu zokusebenza, ngakho-ke kuzomele uwaqalise ngokwakho .
- Ubude obuziro
title
namananicontent
ngeke kubonise i-popover. - Cacisa
container: 'body'
ukuze ugweme ukunikeza izinkinga ngezingxenye eziyinkimbinkimbi (njengamaqembu ethu okokufaka, amaqembu wezinkinobho, njll). - Ukucupha ama-popover ezintweni ezifihliwe ngeke kusebenze.
- Ama-Popovers
.disabled
noma ama-disabled
elementi kumele acushwe ku-elementi yokugoqa. - Uma icushwa kusukela kumahange agoqa emigqeni eminingi, ama-popover azobekwa phakathi phakathi kobubanzi bawo wonke amahange. Sebenzisa
.text-nowrap
kweyakho<a>
ukugwema lokhu kuziphatha. - Ama-Popovers kumele afihlwe ngaphambi kokuthi kukhishwe izici ezihambisanayo ku-DOM.
- Ama-Popovers angaqalwa ngenxa yento engaphakathi kwesithunzi se-DOM.
prefers-reduced-motion
embuzweni wemidiya. Bona ingxenye
yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .
Qhubeka ufunda ukuze ubone ukuthi ama-popover asebenza kanjani ngezinye izibonelo.
Isibonelo: Nika amandla ama-popovers yonke indawo
Enye indlela yokuqalisa wonke ama-popover ekhasini kungaba ukuwakhetha ngesibaluli sawo data-bs-toggle
:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Isibonelo: Ukusebenzisa container
inketho
Uma unezitayela ezithile kusici somzali eziphazamisa i-popover, uzofuna ukucacisa inkambiso container
ukuze i-HTML ye-popover ivele ngaphakathi kwaleyo element esikhundleni.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Isibonelo
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Izikhombisi-ndlela ezine
Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele. Izikhombisi-ndlela ziboniswa uma usebenzisa i-Bootstrap ku-RTL.
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
Cashisa ngokuchofoza okulandelayo
Sebenzisa i- focus
trigger ukuze ucashise ama-popovers ekuchofozeni okulandelayo komsebenzisi kwento ehlukile kunento yokuguqula.
Imakhaphu eqondile iyadingeka ukuze kuchithwe ngokuchofoza okulandelayo
Ukuze uthole ukuziphatha okufanele kwesiphequluli esiphambene nenkundla, kufanele usebenzise <a>
umaka, hhayi umaka <button>
, futhi kufanele ufake tabindex
isibaluli.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
Izakhi ezikhutshaziwe
Izinto disabled
ezinesibaluli azihlangani, okusho ukuthi abasebenzisi abakwazi ukuhambisa phezulu noma ukuzichofoza ukuze bacuphe i-popover (noma ithiphu yamathuluzi). Njengendlela yokusebenza, uzofuna ukuqalisa i-popover kusuka ku-wrapper <div>
noma <span>
, eyenziwe kahle ikhibhodi-igxile usebenzisa tabindex="0"
.
Ezibangeli ze- popover ezikhutshaziwe, ungase futhi data-bs-trigger="hover focus"
uncamele ukuthi i-popover ibonakale njengempendulo esheshayo ebonakalayo kubasebenzisi bakho njengoba bangase bangalindeli ukuchofoza into ekhutshaziwe.
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Sass
Okuguquguqukayo
$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: $border-width;
$popover-border-color: rgba($black, .2);
$popover-border-radius: $border-radius-lg;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow: $box-shadow;
$popover-header-bg: shade-color($popover-bg, 6%);
$popover-header-color: $headings-color;
$popover-header-padding-y: .5rem;
$popover-header-padding-x: $spacer;
$popover-body-color: $body-color;
$popover-body-padding-y: $spacer;
$popover-body-padding-x: $spacer;
$popover-arrow-width: 1rem;
$popover-arrow-height: .5rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: fade-in($popover-border-color, .05);
Ukusetshenziswa
Nika amandla ama-popovers nge-JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Ukwenza ama-popover asebenzele abasebenzisi bekhibhodi nobuchwepheshe obusizayo
Ukuze uvumele abasebenzisi bekhibhodi ukuthi benze ama-popover akho asebenze, kufanele uwangeze kuphela ezintweni ze-HTML ngokuvamile ezigxile kukhibhodi futhi ezisebenzisanayo (njengezixhumanisi noma izilawuli zefomu). Nakuba izakhi ze-HTML ezingafanele (ezifana no- <span>
s) zingenziwa zigxile ngokwengeza tabindex="0"
isibaluli, lokhu kuzongeza izitobhi zethebhu ezingase zicasule futhi zidideke ezintweni ezingahlangani kubasebenzisi bekhibhodi, futhi ubuchwepheshe obusiza obuningi okwamanje abumemezeli okuqukethwe kwe-popover kulesi simo. . Ukwengeza, unganciki kuphela hover
njengesicuphi se-popover yakho, njengoba lokhu kuzobenza bangakwazi ukucupha abasebenzisi bekhibhodi.
Nakuba ungakwazi ukufaka i-HTML ecebile, ehlelekile kuma-popover html
ngenketho, sincoma ngokuqinile ukuthi ugweme ukungeza inani elidlulele lokuqukethwe. Indlela ama-popovers asebenza ngayo njengamanje ukuthi, uma sekubonisiwe, okuqukethwe kwawo kuhlanganiswe nesici sokuqala aria-describedby
nesibaluli. Njengomphumela, konke okuqukethwe kwe-popover kuzomenyezelwa kubasebenzisi bobuchwepheshe obusizayo njengokusakaza okukodwa okude, okungaphazamiseki.
Ukwengeza, nakuba kungenzeka futhi ukufaka phakathi izilawuli ezisebenzisanayo (njengezinto zefomu noma izixhumanisi) ku-popover yakho (ngokwengeza lezi zakhi kuzibaluli allowList
namathegi avunyelwe), qaphela ukuthi okwamanje i-popover ayilawuli ukuhleleka kokugxila kwekhibhodi. Uma umsebenzisi wekhibhodi evula i-popover, ukugxila kuhlala kusici esicuphayo, futhi njengoba i-popover ngokuvamile ingasilandeli ngokushesha isicuphi esakhiweni sedokhumenti, asikho isiqinisekiso sokuthi ukuya phambili/ukucindezela.TABizohambisa umsebenzisi wekhibhodi ku-popover ngokwayo. Ngamafuphi, ukumane ungeze izilawuli ezisebenzisanayo ku-popover kungenzeka kwenze lezi zilawuli zingafinyeleleki/zingasetshenziswa kubasebenzisi bekhibhodi nabasebenzisi bobuchwepheshe obusizayo, noma okungenani kwenzele ukuhleleka kokugxila okuphelele okungenangqondo. Kulezi zimo, cabanga ukusebenzisa ingxoxo ye-modal esikhundleni salokho.
Izinketho
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-
, njengaku data-bs-animation=""
. Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho ukusuka ku-camelCase ukuya ku-kebab-kesi lapho udlulisa izinketho ngezibaluli zedatha. Ngokwesibonelo, esikhundleni sokusebenzisa data-bs-customClass="beautifier"
, sebenzisa data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
,
allowList
nezinketho azikwazi ukunikezwa kusetshenziswa izibaluli zedatha.
Igama | Uhlobo | Okuzenzakalelayo | Incazelo |
---|---|---|---|
animation |
boolean | true |
Faka inguquko ye-CSS fade ku-popover |
container |
umucu | into | amanga | false |
Yengeza i-popover kusici esithile. Isibonelo: |
content |
umucu | into | umsebenzi | '' |
Inani lokuqukethwe elizenzakalelayo uma Uma umsebenzi unikiwe, uzobizwa |
delay |
inombolo | into | 0 |
Ukubambezeleka ukubonisa nokufihla i-popover (ms) - akusebenzi ohlotsheni lwe-trigger okwenziwa ngesandla Uma inombolo inikezwa, ukubambezeleka kusetshenziswa kukho kokubili ukufihla/umbukiso Isakhiwo sento sithi: |
html |
boolean | false |
Faka i-HTML ku-popover. Uma kungamanga, innerText isakhiwo sizosetshenziselwa ukufaka okuqukethwe ku-DOM. Sebenzisa umbhalo uma ukhathazekile ngokuhlaselwa kwe-XSS. |
placement |
umucu | umsebenzi | 'right' |
Indlela yokubeka i-popover - auto | phezulu | phansi | kwesokunxele | kwesokudla. Uma umsebenzi usetshenziswa ukunquma ukubekwa, ubizwa nge-popover node ye-DOM njenge-agumenti yayo yokuqala kanye nenodi yesici esicuphayo esithi DOM njengesibili. Umongo |
selector |
umucu | amanga | false |
Uma kunikezwa isikhethi, izinto ze-popover zizothunyelwa kokuhlosiwe okucacisiwe. Empeleni, lokhu kusetshenziselwa ukunika amandla okuqukethwe kwe-HTML okuguquguqukayo ukuze kwengezwe ama-popover. Bheka lokhu kanye nesibonelo esifundisayo . |
template |
umucu | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Isisekelo se-HTML ongasisebenzisa lapho udala i-popover. Ama-popover Ama-popover
I-elementi yokugoqa engaphandle kufanele ibe |
title |
umucu | into | umsebenzi | '' |
Inani lesihloko elizenzakalelayo uma Uma umsebenzi unikiwe, uzobizwa |
trigger |
umucu | 'click' |
I-popover iqalwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala. manual ayikwazi ukuhlanganiswa nanoma yisiphi esinye isiqhumiso. |
fallbackPlacements |
uhlu | ['top', 'right', 'bottom', 'left'] |
Chaza ukubekwa emuva ngokunikeza uhlu lokubekwa ngokulandelana (ngokulandelana kokuthandayo). Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti okuziphatha kaPopper |
boundary |
umucu | isici | 'clippingParents' |
Umkhawulo womkhawulo wokuchichima we-popover (usebenza kuphela kusilungisi se-Popper's preventOverflow). Ngokuzenzakalelayo iyona 'clippingParents' futhi ingamukela ireferensi ye-HTMLElement (nge-JavaScript kuphela). Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti e-Popper's detectOverflow . |
customClass |
umucu | umsebenzi | '' |
Engeza amakilasi ku-popover uma iboniswa. Qaphela ukuthi lawa makilasi azokwengezwa ngaphezu kwanoma yimaphi amakilasi ashiwo kusifanekiso. Ukwengeza amakilasi amaningi, wahlukanise ngezikhala: Ungakwazi futhi ukudlulisa umsebenzi okufanele ubuyisele uchungechunge olulodwa oluqukethe amagama ekilasi engeziwe. |
sanitize |
boolean | true |
Nika amandla noma vala ukukhucululwa kwendle. Uma yenziwe yasebenza 'template' , 'content' futhi 'title' izinketho zizohlanzwa. Bheka isigaba se-sanitizer emibhalweni yethu ye-JavaScript . |
allowList |
into | Inani elizenzakalelayo | Into equkethe izibaluli namathegi avunyelwe |
sanitizeFn |
null | umsebenzi | null |
Lapha ungakwazi ukunikeza umsebenzi wakho we-sanitize. Lokhu kungaba usizo uma ukhetha ukusebenzisa umtapo wolwazi ozinikele ukwenza ukukhucululwa kwendle. |
offset |
uhlu | umucu | umsebenzi | [0, 8] |
I-offset ye-popover ehlobene nokuhlosiwe kwayo. Ungadlulisa uchungechunge kuzibaluli zedatha ezinamavelu ahlukaniswe ngokhefana afana nalawa: Uma umsebenzi usetshenziselwa ukunquma i-offset, ubizwa ngento equkethe ukubekwa kwe-popper, ireferensi, kanye ne-popper rects njengempikiswano yayo yokuqala. Into eqalisayo inodi ye-DOM idluliswa njengempikiswano yesibili. Umsebenzi kufanele ubuyisele amalungu afanayo anezinombolo ezimbili: . Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti e-Popper's offset . |
popperConfig |
null | into | umsebenzi | null |
Ukuze uguqule ukucushwa kwe-Popper okuzenzakalelayo kwe-Bootstrap, bona ukucushwa kwe-Popper . Uma umsebenzi usetshenziselwa ukudala ukucushwa kwe-Popper, kubizwa ngento equkethe ukucushwa kwe-Popper okuzenzakalelayo kwe-Bootstrap. Ikusiza ukuthi usebenzise futhi uhlanganise okumisiwe nokucushwa kwakho. Umsebenzi kufanele ubuyisele into yokumisa ye-Popper. |
Izibaluli zedatha ze-popover ngayinye
Izinketho ze-popover ngayinye zingacaciswa ngokusebenzisa izibaluli zedatha, njengoba kuchazwe ngenhla.
Ukusebenzisa umsebenzi ngepopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Izindlela
Izindlela ze-Asynchronous kanye noshintsho
Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .
Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .
umbukiso
Iveza i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe (okungukuthi ngaphambi kokuba shown.bs.popover
umcimbi wenzeke). Lokhu kuthathwa njengokuqalwa "ngesandla" kwe-popover. Ama-Popovers isihloko nokuqukethwe kwawo kokubili okuwuziro-ubude akukaze kuboniswe.
myPopover.show()
fihla
Ifihla i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover ifihlekile (okungukuthi ngaphambi kokuba hidden.bs.popover
umcimbi wenzeke). Lokhu kuthathwa njengokuqalwa "ngesandla" kwe-popover.
myPopover.hide()
guqula
Iguqula i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.popover
noma hidden.bs.popover
kwenzeke). Lokhu kuthathwa njengokuqalwa "ngesandla" kwe-popover.
myPopover.toggle()
lahla
Ifihla futhi icekele phansi i-popover ye-elementi (Isusa idatha egciniwe kusici se-DOM). Ama-Popovers asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector
) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .
myPopover.dispose()
vumela
Inikeza i-popover yento ikhono lokuboniswa. Ama-Popovers anikwe amandla ngokuzenzakalela.
myPopover.enable()
khubaza
Isusa amandla okuthi i-popover ye-elementi iboniswe. I-popover izokwazi ukuboniswa kuphela uma inikwe amandla kabusha.
myPopover.disable()
i-toggleVunyiwe
Iguqula ikhono le-popover yento ukuthi iboniswe noma ifihlwe.
myPopover.toggleEnabled()
buyekeza
Ibuyekeza indawo ye-popover yento.
myPopover.update()
getInstance
Indlela emile ekuvumela ukuthi uthole isenzakalo se- popover esihlotshaniswa nento ye-DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Indlela emile ekuvumela ukuthi uthole isenzakalo se- popover esihlotshaniswa nento ye-DOM, noma udale entsha uma kwenzeka ingaqaliswanga
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Imicimbi
Uhlobo lomcimbi | Incazelo |
---|---|
show.bs.popover | Lo mcimbi uvutha ngokushesha lapho show indlela yesibonelo ibizwa. |
kubonisiwe.bs.popover | Lo mcimbi uxoshwa lapho i-popover yenziwe yabonakala kumsebenzisi (izolinda ukuthi izinguquko ze-CSS ziqedele). |
fihla.bs.popover | Lo mcimbi uxoshwa ngokushesha lapho hide indlela yesibonelo ibizwa. |
kufihliwe.bs.popover | Lo mcimbi uyaxoshwa uma i-popover isiqedile ukufihlwa kumsebenzisi (izolinda ukuthi izinguquko ze-CSS ziqedele). |
kufakiwe.bs.popover | Lo mcimbi uxoshwa ngemva show.bs.popover komcimbi lapho isifanekiso se-popover sengeziwe ku-DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})