Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
in English

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.jsequkethe 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 titlenamanani contentngeke 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 .disablednoma ama- disabledelementi kumele acushwe ku-elementi yokugoqa.
  • Uma icushwa kusukela kumahange agoqa emigqeni eminingi, ama-popover azobekwa phakathi phakathi kobubanzi bawo wonke amahange. Sebenzisa .text-nowrapkweyakho <a>ukugwema lokhu kuziphatha.
  • Ama-Popovers kumele afihlwe ngaphambi kokuthi kukhishwe izici ezihambisanayo ku-DOM.
  • Ama-Popovers angaqalwa ngenxa yento engaphakathi kwesithunzi se-DOM.
Ngokuzenzakalelayo, le ngxenye isebenzisa isibulali magciwane esakhelwe ngaphakathi, esihlubula noma yiziphi izici ze-HTML ezingavunyelwe ngokusobala. Bona isigaba se-sanitizer emibhalweni yethu ye-JavaScript ukuze uthole imininingwane eyengeziwe.
Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni 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 containerinketho

Uma unezitayela ezithile kusici somzali eziphazamisa i-popover, uzofuna ukucacisa inkambiso containerukuze 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- focustrigger 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 tabindexisibaluli.

<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 disabledezinesibaluli 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 hovernjengesicuphi se-popover yakho, njengoba lokhu kuzobenza bangakwazi ukucupha abasebenzisi bekhibhodi.

Nakuba ungakwazi ukufaka i-HTML ecebile, ehlelekile kuma-popover htmlngenketho, sincoma ngokuqinile ukuthi ugweme ukungeza inani elidlulele lokuqukethwe. Indlela ama-popovers asebenza ngayo njengamanje ukuthi, uma sekubonisiwe, okuqukethwe kwawo kuhlanganiswe nesici sokuqala aria-describedbynesibaluli. 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 allowListnamathegi 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".

Qaphela ukuthi ngenxa yezizathu zokuphepha i- sanitize, sanitizeFn, allowListnezinketho 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: container: 'body'. Le nketho iwusizo kakhulu ngoba ikuvumela ukuthi ubeke i-popover ekuhambeni kwedokhumenti eduze kwesici esicuphayo - okuzovimbela i-popover ekuntanteni isuke kusici esicuphayo ngesikhathi sokushintsha usayizi wewindi.

content umucu | into | umsebenzi ''

Inani lokuqukethwe elizenzakalelayo uma data-bs-contentisibaluli singekho.

Uma umsebenzi unikiwe, uzobizwa thisnereferensi yawo esethwe ku-elementi i-popover enamathiselwe kuyo.

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:delay: { "show": 500, "hide": 100 }

html boolean false Faka i-HTML ku-popover. Uma kungamanga, innerTextisakhiwo 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 autokucacisiwe, izoqondisa kabusha i-popover ngamandla.

Uma umsebenzi usetshenziswa ukunquma ukubekwa, ubizwa nge-popover node ye-DOM njenge-agumenti yayo yokuqala kanye nenodi yesici esicuphayo esithi DOM njengesibili. Umongo thisusethelwe kusibonelo se-popover.

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 titleazofakwa ku- .popover-header.

Ama-popover contentazofakwa ku- .popover-body.

.popover-arrowizoba umcibisholo we-popover.

I-elementi yokugoqa engaphandle kufanele ibe .popovernekilasi.

title umucu | into | umsebenzi ''

Inani lesihloko elizenzakalelayo uma titleisibaluli singekho.

Uma umsebenzi unikiwe, uzobizwa thisnereferensi yawo esethwe ku-elementi i-popover enamathiselwe kuyo.

trigger umucu 'click' I-popover iqalwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala. manualayikwazi 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: 'class-1 class-2'.

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:data-bs-offset="10,20"

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: .[skidding, distance]

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.popoverumcimbi 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.popoverumcimbi 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.popovernoma hidden.bs.popoverkwenzeke). 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 showindlela 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 hideindlela 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.popoverkomcimbi lapho isifanekiso se-popover sengeziwe ku-DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})