Popovers a wɔde wɔn ho hyɛ mu
Nwoma ne nhwɛsoɔ a wode bɛka Bootstrap popovers, te sɛ deɛ wɔhunu wɔ iOS mu, wɔ element biara a ɛwɔ wo site no so.
Nsɛm a Wɔaka abom
Nneɛma a ɛsɛ sɛ wuhu bere a wode popover plugin no redi dwuma no:
- Popovers de wɔn ho to 3rd party nhomakorabea Popper so ma gyinabea. Ɛsɛ sɛ wode popper.min.js ka ho ansa na bootstrap.js anaa wode
bootstrap.bundle.min.js
/bootstrap.bundle.js
a Popper wom di dwuma na ama popovers ayɛ adwuma! - Popovers hwehwɛ tooltip plugin no sɛ ade a ɛde ne ho to so.
- Popovers yɛ opt-in esiane adwumayɛ nti, enti ɛsɛ sɛ w’ankasa wufi ase .
- Zero-tenten
title
necontent
gyinapɛn ahorow renkyerɛ popover da. - Kyerɛkyerɛ
container: 'body'
sɛnea wobɛkwati nkyerɛase ho haw ahorow wɔ afã horow a ɛyɛ den kɛse mu (te sɛ yɛn nsɛm a wɔde hyɛ mu akuw, bɔtn akuw, ne nea ɛkeka ho). - Popovers a wɔbɛkanyan wɔ nneɛma a ahintaw so no rennyɛ adwuma.
- Ɛsɛ sɛ wɔkanyan popovers ma
.disabled
anaadisabled
element ahorow wɔ wrapper element bi so. - Sɛ wɔkanyan no fi nhama a ɛkyekyere nsensanee pii so a, popovers no bɛkɔ mfinimfini wɔ ankora no nyinaa tɛtrɛtɛ ntam. Fa di dwuma
.text-nowrap
wɔ wo<a>
s so na woakwati saa suban yi. - Ɛsɛ sɛ wɔde popovers sie ansa na wɔayi wɔn nneɛma a ɛne no hyia no afi DOM no mu.
- Popovers betumi akanyan aseda element bi a ɛwɔ sunsuma DOM mu.
prefers-reduced-motion
media asɛmmisa no so. Hwɛ
yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .
Kɔ so kenkan na hwɛ sɛnea popovers de nhwɛso ahorow bi yɛ adwuma.
Nhwɛso: Ma popovers nyɛ adwuma wɔ baabiara
Ɔkwan baako a wobɛfa so ahyɛ popovers nyinaa ase wɔ krataafa bi so ne sɛ wobɛpaw wɔn denam wɔn data-bs-toggle
su so:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Nhwɛso: Sɛ wode container
option no bedi dwuma
Sɛ wowɔ style ahorow bi wɔ ɔwofo element bi so a ɛtwetwe popover bi a, wobɛpɛ sɛ wokyerɛ amanneɛbɔ bi sɛnea container
ɛbɛyɛ a popover no HTML bɛda adi wɔ saa element no mu mmom.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Nhwɛsoɔ
<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>
Akwankyerɛ anan
Nneɛma anan wɔ hɔ a wubetumi apaw: atifi, nifa, ase, ne benkum a wɔahyehyɛ no pɛpɛɛpɛ. Akwankyerɛ ahorow no yɛ ahwehwɛ bere a wode Bootstrap redi dwuma wɔ RTL mu no.
<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>
Dismiss wɔ klik a edi hɔ no so
Fa focus
trigger no yi popovers wɔ ɔdefo no klik a edi hɔ a ɛfa element soronko bi ho sen toggle element no so.
Markup pɔtee a ɛho hia ma dismiss-on-next-click
Sɛ wopɛ sɛ wobɔ cross-browser ne cross-platform suban yiye a, ɛsɛ sɛ wode <a>
tag no di dwuma, ɛnyɛ tag no <button>
, na ɛsɛ sɛ wode tabindex
attribute nso ka ho.
<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'
})
Nneɛma a wɔadi dɛm
Elements a ɛwɔ disabled
attribute no nyɛ nkitahodi, a ɛkyerɛ sɛ wɔn a wɔde di dwuma no ntumi nkɔ so anaasɛ wɔnkyere wɔn mfa nhyɛ popover (anaasɛ adwinnade ho nsɛm). Sɛ́ ano aduru no, wobɛpɛ sɛ wokanyan popover no fi wrapper <div>
anaa <span>
, a eye sen biara a wɔayɛ no keyboard-focusable denam tabindex="0"
.
Wɔ popover triggers a wɔadi dɛm ho no, ebia wobɛpɛ nso data-bs-trigger="hover focus"
sɛnea ɛbɛyɛ a popover no bɛda adi sɛ nsɛm a wɔde aniwa hu ntɛm ara ma wo dwumadiefoɔ no sɛdeɛ ebia wɔrenhwɛ kwan sɛ wɔbɛkliki element a wɔadi dɛm so.
<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
Nneɛma a Ɛsakra
$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);
Sɛnea wɔde di dwuma
Ma popovers nyɛ adwuma denam JavaScript so:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Popovers a wɔbɛma ayɛ adwuma ama keyboard ne mfiridwuma a ɛboa wɔn a wɔde di dwuma no
Sɛ wobɛma keyboard dwumadiefoɔ atumi ayɛ wo popovers no adwuma a, ɛsɛ sɛ wode ka HTML elements a ɛyɛ atetesɛm no keyboard-focusable ne nkitahodiɛ (te sɛ links anaa form controls) nko ara. Ɛwom sɛ wobetumi ama HTML nneɛma a wɔpɛ (te sɛ <span>
s) ayɛ nea wɔde wɔn adwene si so denam tabindex="0"
su no a wɔde bɛka ho so de, nanso eyi bɛma tab gyinabea ahorow a ebetumi ayɛ abufuw na ɛyɛ basaa bɛka nneɛma a ɛnyɛ nkitahodi ho ama keyboard dwumadiefoɔ, na mfiridwuma a ɛboa dodoɔ no ara mprempren mmɔ popover no mu nsɛm ho amanneɛ wɔ saa tebea yi mu . Bio nso, mfa wo ho nto so nkutoo hover
sɛ nea ɛkanyan wo popovers no, efisɛ eyi bɛma ayɛ den sɛ ɛbɛkanyan wɔn a wɔde keyboard di dwuma no.
Bere a wubetumi de HTML a ɛyɛ fɛ, a wɔahyehyɛ no ahyɛ popovers mu a html
wobɛpaw no, yɛhyɛ nyansa denneennen sɛ kwati sɛ wode nsɛm a ɛboro so bɛka ho. Ɔkwan a popovers fa so yɛ adwuma mprempren ne sɛ, sɛ wɔda no adi wie a, wɔde wɔn nsɛm no kyekyere trigger element a ɛwɔ aria-describedby
attribute no ho. Ne saa nti, wɔde popover no mu nsɛm nyinaa bɛto gua akyerɛ wɔn a wɔde mfiridwuma ho nimdeɛ a ɛboa di dwuma no sɛ nsu tenten biako a wontwa mu.
Bio nso, bere a ɛyɛ yiye sɛ wode nkitahodi controls (te sɛ form elements anaa links) nso bɛka wo popover no ho (denam saa elements yi a wode bɛka allowList
of allowed attributes and tags ho) no, hu sɛ mprempren popover no nhwɛ keyboard focus nhyehyɛe so. Sɛ keyboard dwumadie bi bue popover a, adwene kɔ so tra triggering element no so, na sɛdeɛ popover no taa nni trigger no akyi ntɛm ara wɔ document no nhyehyɛɛ mu no, biribiara nni hɔ a ɛkyerɛ sɛ wobɛkɔ anim/abɛmiaTABbɛma obi a ɔde keyboard di dwuma akɔ popover no ankasa mu. Ne tiawa mu no, sɛ wode nkitahodi nhyehyɛe ahorow bɛka popover ho kɛkɛ a, ɛda adi sɛ ɛbɛma saa nhyehyɛe ahorow yi ayɛ nea wontumi nkɔ/wɔrentumi mfa nni dwuma mma wɔn a wɔde keyboard di dwuma ne wɔn a wɔde mfiridwuma a ɛboa di dwuma, anaasɛ anyɛ yiye koraa no, ɛbɛma wɔanya nhyehyɛe a wɔde wɔn adwene si so nyinaa a ntease nnim. Wɔ saa nsɛm yi mu no, susuw ho sɛ wode modal nkɔmmɔbɔ bedi dwuma mmom.
Nneɛma a wubetumi apaw
Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-
, sɛnea ɛwɔ data-bs-animation=""
. Hwɛ sɛ wobɛsesa case type a ɛwɔ option din no mu afi camelCase akɔ kebab-case bere a wode options no nam data attributes so retwam no. Sɛ nhwɛso no, sɛ́ anka wode bedi dwuma data-bs-customClass="beautifier"
no, fa data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, ne
options no mma.allowList
Din | Korɔ | Mfiaseɛ | Nkyerɛmu |
---|---|---|---|
animation |
boolean ho asɛm | true |
Fa CSS fade nsakrae bi di dwuma wɔ popover no so |
container |
ahama | element | ɛnyɛ ampa | false |
Ɛde popover no ka element pɔtee bi ho. Nhwɛso: |
content |
ahama | element | dwumadie | '' |
Default content value sɛ Sɛ wɔde dwumadie bi ma a, wɔbɛfrɛ no a ne |
delay |
nɔma | adeɛ | 0 |
Delay kyerɛ na wɔde sie popover (ms) - no mfa manual trigger type ho Sɛ wɔde nɔma bi ma a, wɔde delay di dwuma wɔ hide/show abien no nyinaa mu Adeɛ nhyehyɛɛ ne: |
html |
boolean ho asɛm | false |
Fa HTML hyɛ popover no mu. Sɛ ɛyɛ atoro a, innerText wɔde agyapadeɛ bedi dwuma de ahyɛ nsɛm a ɛwɔ DOM no mu. Fa text di dwuma sɛ XSS ntua ho asɛm haw wo a. |
placement |
ahama | dwumadie | 'right' |
Sɛnea wɔde popover no si hɔ - auto | soro | ase hɔ | benkum so | nifa. Sɛ wɔde dwumadie bi di dwuma de kyerɛ beaeɛ a wɔde bɛto a, wɔfrɛ no a popover DOM node no yɛ ne akasakasa a ɛdi kan ne triggering element DOM node sɛ ne deɛ ɛtɔ so mmienu. Wɔde |
selector |
ahama | ɛnyɛ ampa | false |
Sɛ wɔde selector bi ma a, wɔde popover nneɛma bɛhyɛ botae ahorow a wɔakyerɛ no nsa. Wɔ nneyɛe mu no, wɔde eyi di dwuma de ma HTML nsɛm a ɛyɛ nnam no tumi nya popovers a wɔde aka ho. Hwɛ eyi ne nhwɛso a ɛma nsɛm pii . |
template |
ahoma | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML a wode bedi dwuma bere a woreyɛ popover no. Wɔde popover no Wɔde popover no
Ɛsɛ sɛ wrapper element a ɛwɔ akyi paa no nya |
title |
ahama | element | dwumadie | '' |
Default title value sɛ Sɛ wɔde dwumadie bi ma a, wɔbɛfrɛ no a ne |
trigger |
ahoma | 'click' |
Sɛnea popover no fi ase - klik | hover | adwene a wɔde si biribi so | akwankyerɛ. Wubetumi atwam wɔ nneɛma pii a ɛkanyan adwene mu; fa ahunmu tetew wɔn mu. manual wontumi mfa nkata ade foforo biara a ɛkanyan no ho. |
fallbackPlacements |
array a ɛwɔ hɔ | ['top', 'right', 'bottom', 'left'] |
Kyerɛkyerɛ fallback placements mu denam placements list a wode bɛma wɔ array mu (sɛnea wopɛ nnidiso nnidiso). Sɛ wopɛ nsɛm pii a hwɛ Popper's behavior docs |
boundary |
ahama | adeɛ | 'clippingParents' |
Overflow anohyeto hye a ɛwɔ popover no mu (ɛfa Popper preventOverflow modifier no nkutoo ho). Sɛnea wɔahyɛ no ɛyɛ 'clippingParents' na ebetumi agye HTMLElement nkyerɛkyerɛmu (ɛnam JavaScript nkutoo so). Sɛ wopɛ nsɛm pii a hwɛ Popper detectOverflow docs . |
customClass |
ahama | dwumadie | '' |
Fa adesua ahorow ka popover no ho bere a wɔakyerɛ no. Hyɛ no nsow sɛ wɔde saa adesua ahorow yi bɛka adesua ahorow biara a wɔakyerɛ wɔ nsusuwso no mu no ho. Sɛ wode adesua ahorow pii bɛka ho a, fa ahunmu tetew mu: Wubetumi nso de dwumadie bi a ɛsɛ sɛ ɛsan de ahama baako a adesua din foforɔ wom ba no atwam. |
sanitize |
boolean ho asɛm | true |
Ma sanitization no nyɛ adwuma anaasɛ ɛnnyɛ adwuma. If activated 'template' , 'content' na 'title' options no bɛyɛ sanitized. Hwɛ sanitizer ɔfã no wɔ yɛn JavaScript nkrataa no mu . |
allowList |
adeɛ | Default bo a ɛsom | Adeɛ a ɛwɔ su ne tags a wɔama ho kwan |
sanitizeFn |
null | dwumadie | null |
Ɛha na wubetumi de w’ankasa sanitize adwuma ama. Eyi betumi ayɛ nea mfaso wɔ so sɛ wopɛ sɛ wode nhomakorabea a wɔatu ho ama di dwuma de yɛ ahotew a. |
offset |
nhyehyeɛ | ahama | dwumadie | [0, 8] |
Offset a popover no toto ne botae no ho. Wubetumi de ahama bi akɔ data su ahorow mu a ɛwɔ botae ahorow a wɔatew mu wɔ koma mu te sɛ: Sɛ wɔde dwumadie bi di dwuma de kyerɛ offset no a, wɔde adeɛ bi a ɛwɔ popper placement, reference, ne popper rects sɛ ne argument a ɛdi kan no frɛ no. Wɔde triggering element DOM node no twam sɛ akyinnyegye a ɛto so abien. Ɛsɛ sɛ dwumadie no san de array a ɛwɔ nɔma mmienu ba: . Sɛ wopɛ nsɛm pii a hwɛ Popper's offset docs . |
popperConfig |
null | ade | dwumadie | null |
Sɛ wopɛ sɛ wosakra Bootstrap no Popper nhyehyɛe a ɛwɔ hɔ dedaw no a, hwɛ Popper nhyehyɛe . Sɛ wɔde dwumadie bi di dwuma de yɛ Popper nhyehyeɛ no a, wɔde adeɛ bi a ɛwɔ Bootstrap no Popper nhyehyeɛ a ɛwɔ hɔ dedaw no frɛ no. Ɛboa wo ma wode default no di dwuma na wode bom ne w’ankasa nhyehyɛe. Ɛsɛ sɛ dwumadie no san de nhyehyɛɛ adeɛ bi ba ma Popper. |
Data su ahorow a ɛfa ankorankoro popovers ho
Wobetumi akyerɛ akwan foforo a wɔbɛfa so akyerɛ ankorankoro popovers denam data su ahorow a wɔde bedi dwuma so, sɛnea wɔakyerɛkyerɛ mu wɔ atifi hɔ no.
Dwumadi a wɔde di dwuma nepopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Akwan a wɔfa so yɛ
Asynchronous akwan ne nsakrae ahorow
API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .
da no adi
Ɛda element bi popover adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada popover no adi ankasa (kyerɛ sɛ ansa na shown.bs.popover
asɛm no asi). Wobu eyi sɛ “nsaano” a wɔde kanyan popover no. Popovers a wɔn asɛmti ne emu nsɛm nyinaa yɛ zero-length no, wɔmfa nkyerɛ da.
myPopover.show()
tɛ
Fa element bi popover no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde popover no asie ankasa (kyerɛ sɛ ansa na hidden.bs.popover
asɛm no asi). Wobu eyi sɛ “nsaano” a wɔde kanyan popover no.
myPopover.hide()
toggle no
Toggles element bi popover. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ popover no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.popover
anaa hidden.bs.popover
adeyɛ no aba). Wobu eyi sɛ “nsaano” a wɔde kanyan popover no.
myPopover.toggle()
tow gu
Hides na ɛsɛe element bi popover (Eyi data a wɔde asie wɔ DOM element no so). Popovers a ɛde delegation di dwuma (a wɔbɔ denam option noselector
so ) no ntumi ns��e no ankorankoro wɔ descendant trigger elements so.
myPopover.dispose()
ma kwan
Ɛma element bi popover tumi a wɔde bɛkyerɛ. Popovers no yɛ adwuma default so.
myPopover.enable()
sɛe
Yi tumi a ɛwɔ hɔ ma element bi popover a wɔbɛda no adi no fi hɔ. Sɛ wɔsan de yɛ adwuma nkutoo a, wobetumi akyerɛ popover no.
myPopover.disable()
toggleWɔama ayɛ adwuma
Toggles tumi a ɛma element bi popover bɛkyerɛ anaa wɔde asie.
myPopover.toggleEnabled()
sakra mu
Updates gyinabea a element bi popover wɔ.
myPopover.update()
nyaNhwɛsode
Static kwan a ɛma wo kwan ma wo nya popover nhwɛso a ɛbata DOM element bi ho
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
nyaAnaasɛKyɛNhwɛso
Static kwan a ɛma wo kwan ma wonya popover nhwɛso a ɛbata DOM element bi ho, anaasɛ wobɔ foforo sɛ ɛba sɛ wɔanhyɛ ase a
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Nsɛm a esisi
Adeyɛ no su | Nkyerɛmu |
---|---|
kyerɛ.bs.popover | Saa adeyɛ yi tow ntɛm ara bere a show wɔfrɛ instance kwan no. |
wɔakyerɛ.bs.popover | Wɔtow saa adeyɛ yi bere a wɔayɛ popover no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie). |
hide.bs.popover a ɛwɔ hɔ no | Wɔtow saa adeyɛ yi ntɛm ara bere a hide wɔafrɛ instance kwan no. |
ahintaw.bs.ohia | Wɔtow saa adeyɛ yi bere a popover no awie a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow no awie). |
wɔde ahyɛ mu.bs.popover | Wɔtow saa adeyɛ yi wɔ adeyɛ no akyi show.bs.popover bere a wɔde popover template no aka DOM no ho. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})