U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

Popovers

Dukumeenti iyo tusaalooyin lagu daro Bootstrap popovers, sida kuwa laga helo iOS, shay kasta oo ku yaal boggaaga.

Dulmar

Waxyaabaha ay tahay in la ogaado marka la isticmaalayo popover plugin:

  • Popovers waxay ku tiirsan yihiin maktabadda xisbiga 3aad ee Popper meelaynta. Waa inaad ku dartaa popper.min.js ka hor bootstrap.js ama isticmaal bootstrap.bundle.min.js/ bootstrap.bundle.jska kooban Popper si ay popovers u shaqeeyaan!
  • Popovers waxay u baahan yihiin plugin tip -ku-tiirsanaan ahaan.
  • Popovers waxay u soo galeen sababo waxqabad dartood, marka waa inaad adigu bilawdaa .
  • Dhererka eber titleiyo contentqiyamku weligood ma muujin doonaan popover.
  • Qeex container: 'body'si aad uga fogaato soo jeedinta dhibaatooyinka qaybo badan oo kakan (sida kooxahayada wax gelinta, kooxaha badhanka, iwm).
  • Kicinta popovers ee walxaha qarsoon ma shaqayn doono.
  • Popovers .disabledama disabledcuriyayaasha waa in lagu kiciyo curiyaha duubka ah.
  • Marka uu ka kiciyo barroosinno isku duuban dhowr xariiq, popovers waxay dhexda u ahaan doonaan ballaca guud ee barroosinnada. Isticmaal s si .text-nowrapaad <a>uga fogaato dhaqankan.
  • Rabshadaha waa in la qariyaa ka hor inta aan laga saarin walxaha u dhigma ee DOM.
  • Popovers waa la kicin karaa iyada oo ay ugu wacan tahay shay ku jira hadhka DOM.
Sida caadiga ah, qaybtani waxay isticmaashaa nadiifiyaha ku dhex jira, kaas oo ka saara wax kasta oo HTML ah oo aan si cad loo ogolayn. Faahfaahin dheeraad ah ka eeg qaybta fayadhowrka ee dukumeentiyada JavaScript .
Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Sii wad akhri si aad u aragto sida popovers ula shaqeeyaan tusaalooyinka qaarkood.

Tusaale: Dari popovers meel kasta

Hal dariiqo oo lagu bilaabi karo dhammaan popovers bogga waxay noqon kartaa in lagu xusho data-bs-togglesifadooda:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Tusaale: Isticmaalka containerikhtiyaarka

Markaad haysatid qaabab qaar oo ah walxaha waalidka ee farageliya popover, waxaad u baahan doontaa inaad qeexdo caado containersi HTML popover's uu uga dhex muuqdo qaybtaas.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Tusaale

<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>

Afar jiho

Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan. Tilmaamaha waa la milicsadaa marka la isticmaalayo Bootstrap gudaha 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>

Ka saar marka xigta guji

Isticmaal focuskiciyeyaasha si aad u tirtirto popovers ee isticmaalaha gujinta xigta ee shay ka duwan curiyaha beddelka.

Calaamadayn gaar ah ayaa loo baahan yahay si loo joojiyo-ku-xigta-guji

Si aad u hesho hab-dhaqan iskutallaab ah oo ku habboon iyo hab-dhaqan-madal-madal ah, waa inaad isticmaashaa <a>summada, maaha summada , <button>sidoo kale waa inaad ku dartaa tabindexsifo.

<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'
})

Curiyayaasha naafada

Qaybaha sifada leh disabledma aha kuwo is dhexgal ah, taasoo la micno ah in isticmaalayaashu aanay kor u qaadi karin ama aanay gujin karin si ay u kiciyaan popover (ama qalab). Xakameyn ahaan, waxaad u baahan doontaa inaad ka kiciso popover ka duubabka <div>ama <span>, sida habboon loo sameeyay kiiboodhka diiradda saaraya iyadoo la adeegsanayo tabindex="0".

Kiciyeyaasha popover naafada, waxa kale oo aad doorbidi kartaa data-bs-trigger="hover focus"si popover-ku ugu muuqdo jawaab celin muuqaal degdeg ah isticmaalayaashaada maadaama laga yaabo in aanay filanayn inay gujiyaan shay naafada ah.

<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

Kala duwanaansho

$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);

Isticmaalka

U oggolow popovers iyada oo loo marayo JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Samaynta popovers u shaqeyso kiiboodhka iyo isticmaalayaasha tignoolajiyada caawiya

Si loogu oggolaado isticmaaleyaasha kiiboodhka inay dhaqaajiyaan popovers-kaaga, waa inaad ku dartaa oo keliya curiyeyaasha HTML kuwaas oo dhaqan ahaan kiiboodhka diirada saaraya iyo is dhexgal (sida isku xidhka ama kontaroolada foomka). In kasta oo walxaha HTML-ka ah (sida <span>s) laga dhigi karo mid diiradda lagu saari karo iyadoo lagu darayo sifada tabindex="0", tani waxay ku dari doontaa joogsi laga yaabo inay dhibsato iyo jahawareer ku sameyso walxaha aan is dhex galka lahayn ee isticmaalayaasha kiiboodhka, iyo teknoolojiyadda caawinta badankoodu hadda kuma dhawaaqaan nuxurka popover ee xaaladdan. . Intaa waxaa dheer, ha isku hallayn oo kaliya hoverinay tahay kicinta popovers-kaaga, sababtoo ah tani waxay ka dhigaysaa kuwo aan suurtagal ahayn inay kiciyaan isticmaalayaasha kiiboodhka.

Inta aad geli karto hodan, habaysan HTML ee popovers oo leh htmlikhtiyaarka, waxaan si adag kuugula talineynaa inaad iska ilaaliso inaad ku darto qadar xad dhaaf ah oo ka kooban. Habka popovers hadda u shaqeeyaan waa in, marka la soo bandhigo, nuxurkoodu wuxuu ku xiran yahay curiyaha kiciya ee leh aria-describedbysifo. Natiijadu waxay tahay, dhammaan waxa ku jira popover-ka waxa lagu dhawaaqi doonaa isticmaalayaasha tignoolajiyada caawiya sidii hal socod dheer oo aan kala go' lahayn.

Intaa waxaa dheer, iyadoo ay suurtagal tahay in sidoo kale lagu daro kontaroolada is-dhexgalka (sida walxaha qaabka ama isku xidhka) popoverkaaga (adigoo ku daraya walxahan allowListsifooyinka iyo calaamadaha la oggol yahay), ogow in wakhtigan popoverku aanu maamulin habka diiradda saarista kiiboodhka. Marka isticmaalaha kiiboodhka uu furo popover, diiradda ayaa hadhi doonta curiyaha kicinaya, iyo sida popover-ku inta badan aanu isla markiiba raacin kicinta ku jirta qaab dhismeedka dukumeentiga, ma jirto dammaanad qaadka in horay loo socdo/cadaadisTABwuxuu u guuri doonaa isticmaalaha kiiboodhka gudaha popover laftiisa. Marka la soo koobo, si fudud ku darida kontaroolada isdhexgalka ee popover waxay u badan tahay inay ka dhigto kontarooladan mid aan la heli karin/aan la isticmaali karin isticmaalayaasha kiiboodhka iyo isticmaalayaasha tignoolajiyada caawinta, ama ugu yaraan samaynta nidaamka guud ee diirada aan macquul ahayn. Xaaladahan, ka fiirso inaad isticmaasho qaab wada hadal ah.

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-, sida ku jira data-bs-animation="". Hubi inaad ka beddesho nooca kiiska ee magaca ikhtiyaarka ah ee geela una beddelo kiis kebab marka aad doorashooyinka ku gudbinayso sifooyinka xogta. Tusaale ahaan, halkii aad isticmaali lahayd data-bs-customClass="beautifier", isticmaal data-bs-custom-class="beautifier".

Ogsoonow in sababo ammaan dartood sanitize, sanitizeFn, iyo allowListikhtiyaarrada aan lagu bixin karin iyadoo la adeegsanayo sifooyinka xogta.
Magaca Nooca Asal ahaan Sharaxaada
animation booliyan true Codso u gudbida libdhicida CSS ilaa popover
container xadhig | element | been ah false

Ku dhejinta popover-ka shay gaar ah. Tusaale container: 'body':. Doorashadani waxay si gaar ah faa'iido u leedahay inay kuu ogolaato inaad ku dhejiso qulqulka qulqulka dukumeentiga u dhow curiyaha kiciya - kaas oo ka ilaalin doona popover inuu ka sababbeeyo walxaha kiciya inta lagu jiro cabbirka daaqada.

content xadhig | element | shaqayn ''

Qiimaha nuxurka asalka ah haddii data-bs-contentsifadu aanay jirin.

Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo thistixraaceeda loo dejiyey curiyaha popover-ku ku dheggan yahay.

delay lambarka | walax 0

Dib u dhigista muujinta iyo qarinta popover (ms) - kuma khusayso nooca kiciya gacanta

Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba

Qaab dhismeedka shaygu waa:delay: { "show": 500, "hide": 100 }

html booliyan false Geli HTML-ka popover-ka Haddii ay been tahay, innerTexthantida waxaa loo isticmaali doonaa in lagu geliyo DOM. Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS.
placement xadhig | shaqayn 'right'

Sida loo dhigo popover - auto | sare | hoose | bidix | xaq.
Marka autola cayimo, waxay si firfircoon dib u habayn doontaa popover-ka.

Marka hawl loo isticmaalo si loo go'aamiyo meelaynta, waxaa lagu magacaabaa node popover DOM oo ah dooddeeda kowaad iyo curiyaha DOM node oo ah kan labaad. Macnaha thisguud waxa loo dejiyay tusaale popover.

selector xadhig | been ah false Haddii doorasho la bixiyo, shayada soo-bandhigista waxa loo igmaday bartilmaameedyada la cayimay. Ficil ahaan, tan waxaa loo istcimaalaa in lagu suurtageliyo nuxurka HTML ee firfircoon in lagu daro popovers. Bal u fiirso tan iyo tusaale wargelin ah .
template xadhig '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML saldhig si loo isticmaalo marka la abuurayo popover.

Popover's titleayaa lagu duri doonaa .popover-header.

Popover's contentayaa lagu duri doonaa .popover-body.

.popover-arrowwaxay noqon doontaa fallaadha popover.

Cutubka duubka ugu dambeeya waa inuu lahaadaa .popoverfasalka.

title xadhig | element | shaqayn ''

Qiimaha cinwaanka caadiga ah haddii titlesifadu aanay jirin.

Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo thistixraaceeda loo dejiyey curiyaha popover-ku ku dheggan yahay.

trigger xadhig 'click' Sida popover u kiciyo - guji | dullid | diiradda | buug-gacmeedka. Waxaad ka gudbi kartaa kiciyeyaasha badan; kala saar meel bannaan. manuallaguma dari karo kiciye kale.
fallbackPlacements diyaarin ['top', 'right', 'bottom', 'left'] Qeex meelaynta dib u dhaca adiga oo siinaya liis meelayn ah (sida ay u kala door bidaan). Wixii macluumaad dheeraad ah tixraac dukumeentiyada dhaqanka Popper
boundary xadhig | curiye 'clippingParents' Xadka xad-dhaafka xad-dhaafka ah ee soohdinta popover (waxay khusaysaa oo keliya Popper ka-hortagga qulqulka qulqulka). Sida caadiga ah waa 'clippingParents'oo aqbali kartaa tixraaca HTMLElement (iyada oo loo marayo JavaScript kaliya). Wixii macluumaad dheeraad ah tixraac Popper's detectOverflow docs .
customClass xadhig | shaqayn ''

Casharo ku dar popover marka la muujiyo. Ogsoonow in fasalladan lagu dari doono marka lagu daro fasal kasta oo lagu qeexay qaab-dhismeedka. Si loogu daro fasalo badan, ku kala saar meelo banaan: 'class-1 class-2'.

Waxa kale oo aad gudbin kartaa hawl soo celinaysa hal xadhig oo ay ku jiraan magacyo dheeraad ah.

sanitize booliyan true Daar ama dami nadaafadda Haddii la hawlgeliyo 'template', 'content'iyo 'title'fursadaha waa la nadiifin doonaa. Ka eeg qaybta nadaafadda ee dukumeentiyada JavaScript .
allowList walax Qiimaha caadiga ah Shayga oo ka kooban sifooyin iyo calaamado la oggol yahay
sanitizeFn waxba | shaqayn null Halkan waxa aad ku keeni kartaa shaqadaada nadaafadda. Tani waxay noqon kartaa mid faa'iido leh haddii aad doorbidayso inaad isticmaasho maktabad gaar ah si aad u sameyso nadaafadda.
offset array | xadhig | shaqayn [0, 8]

Deminta popover marka loo eego bartilmaameedka. Waxaad ku gudbin kartaa xarkaha xogta sifooyin leh qiyam kala soocan sida:data-bs-offset="10,20"

Marka hawl loo isticmaalo in lagu go'aamiyo dhimista, waxa loogu yeedhaa shay ka kooban meelaynta popper, tixraaca, iyo popper rects sida doodiisa kowaad. Xubinta kicinta ee DOM node waxa loo gudbiyaa sidii doodda labaad. Shaqadu waa inay soo celisaa array leh laba lambar: .[skidding, distance]

Macluumaad dheeraad ah ka eeg dukumeentiyada dhimista ee Popper .

popperConfig waxba | shay | shaqayn null

Si aad u bedesho Bootstrap's default Popper config, arag qaabka Popper .

Marka shaqada loo isticmaalo in lagu abuuro qaabaynta Popper, waxa loogu yeedhaa shay ka kooban qaabaynta Bootstrap ee caadiga ah ee Popper. Waxay kaa caawinaysaa inaad isticmaasho oo aad ku darto qaabka caadiga ah iyo qaabayntaada. Shaqadu waa inay soo celisaa shayga qaabaynta ee Popper.

Sifooyinka xogta ee popovers shaqsi

Ikhtiyaarada popovers shakhsi ahaan waxaa lagu qeexi karaa iyada oo la isticmaalayo sifooyin xogta, sida kor lagu sharaxay.

Isticmaalka shaqada lehpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Hababka

Hababka iyo kala-guurka aan isku midka ahayn

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxa dheer, hab ku baaqaya qayb ka-wareejin ah waa la iska indhatiraa .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .

show

Waxay daaha ka qaadaysaa soo boodada curiyaha Ku soo noqoshada soo wacaha ka hor inta aan si dhab ah loo muujin popover (ie ka hor intaanay shown.bs.popoverdhacdada dhicin). Tan waxa loo tixgalinayaa "buuga" kicinta popover. Popovers oo cinwaankoodu iyo nuxurkooduba yahay eber-dherer weligood lama soo bandhigin.

myPopover.show()

qari

Wuxuu qariyaa boodboodka curiyaha. Ku soo noqoshada soo wacaha ka hor inta aan la qarinin popover-ka (tusaale ka horhidden.bs.popover dhacdada dhicin). Tan waxa loo tixgalinayaa "buuga" kicinta popover.

myPopover.hide()

leexleex

Beddelaa soo boodada curiyaha Ku soo noqda qofka soo wacaya ka hor inta aan bood-boodka dhab ahaantii la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.popoverama hidden.bs.popoverdhacdada dhicin). Tan waxa loo tixgalinayaa "buuga" kicinta popover.

myPopover.toggle()

tuurid

Wuxuu qariyaa oo baabi'iyaa boodboodka cunsurka (Waxay meesha ka saartaa xogta kaydsan ee cunsurka DOM). Popovers isticmaala ergada (kuwaas oo la abuuray iyadoo la isticmaalayo ikhtiyaarka selector) si gaar ah looma baabi'in karo walxaha kiciya faraca.

myPopover.dispose()

awood

Siinaya popover element awood lagu muujiyo. Popovers waa la dajiyay si toos ah.

myPopover.enable()

hawl gab

Waxay meesha ka saartaa awoodda soo-bandhigidda curiyaha si loo muujiyo. Booqashada ayaa la tusi karaa oo keliya haddii dib loo hawlgeliyo.

myPopover.disable()

Daloola

Waxay beddeshaa awoodda boodboodka curiyaha si loo muujiyo ama loo qariyo.

myPopover.toggleEnabled()

cusbooneysiin

Waxay cusboonaysiisaa booska boodboodka curiyaha.

myPopover.update()

heliTusaale

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha popover ee la xidhiidha curiyaha DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

HelOrCreateInstance

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha popover ee la xidhiidha walxaha DOM, ama abuurto mid cusub haddii aan la bilaabin

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Dhacdooyinka

Nooca dhacdada Sharaxaada
show.bs.popover Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
la tusay.bs.popover Dhacdadan waxa la eryaa marka popover-ka laga dhigo mid la arki karo isticmaaluhu (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
qari.bs.popover Dhacdadan ayaa isla markaaba la eryaa marka hidehabka tusaale ahaan loo waco.
qarsoon.bs.popover Dhacdadan waxa la eryaa marka popover uu dhammeeyo in laga qariyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
la geliyey.bs.popover Dhacdadan ayaa la eryaa dhacdada ka dib show.bs.popovermarka qaabka popover lagu daray DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})