Popovers
Akwụkwọ na ihe atụ maka ịgbakwunye popovers Bootstrap, dị ka ndị ahụ dị na iOS, na mmewere ọ bụla na saịtị gị.
Nchịkọta
Ihe ị ga-ama mgbe ị na-eji ngwa mgbakwunye popover:
- Popovers na-adabere na ọba akwụkwọ ndị otu nke atọ Popper maka itinye ya. Ị ga-agụnye popper.min.js tupu bootstrap.js ma ọ bụ jiri
bootstrap.bundle.min.js
/bootstrap.bundle.js
nke nwere Popper ka popovers rụọ ọrụ! - Popovers chọrọ ngwa mgbakwunye ngwaọrụ dị ka ndabere.
- Popovers abanyela maka ebumnuche arụmọrụ, yabụ ị ga-ebido ya n'onwe gị .
- Ogologo efu
title
nacontent
ụkpụrụ agaghị egosi popover. - Ezipụta
container: 'body'
ka ịzenarị nsogbu n'ime ihe ndị dị mgbagwoju anya (dị ka otu ntinye anyị, otu bọtịnụ, wdg). - Ịkpalite popovers na ihe zoro ezo agaghị arụ ọrụ.
- Popovers maka
.disabled
ma ọ bụdisabled
ọcha ga-akpalite na ihe mkpuchi. - Mgbe a kpalitere site na arịlịka nke kechie n'ofe ahịrị dị iche iche, popovers ga-adị n'etiti obosara nke arịlịka n'ozuzu ya. Jiri
.text-nowrap
na<a>
s gị zere omume a. - A ghaghị izobe ihe ndị na-ebupụta ihe tupu e wepụ ihe ndị kwekọrọ na DOM.
- Enwere ike ịkpalite popovers n'ihi ihe dị n'ime onyinyo DOM.
prefers-reduced-motion
ajụjụ mgbasa ozi. Hụ akụkụ
ngagharị ewelatala nke akwụkwọ nnweta anyị .
Nọgide na-agụ ka ịhụ ka popovers si arụ ọrụ na ụfọdụ ọmụmaatụ.
Ọmụmaatụ: Kwado popovers ebe niile
Otu ụzọ isi bido popovers niile na ibe ga-abụ ịhọrọ ha site na data-bs-toggle
njirimara ha:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Ọmụmaatụ: Iji container
nhọrọ
Mgbe ị nwere ụdị ụfọdụ na mmewere nne na nna na-egbochi popover, ị ga-achọ ịkọwapụta omenala container
ka HTML popover wee pụta n'ime mmewere ahụ kama.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Ọmụmaatụ
<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>
Ụzọ anọ
Nhọrọ anọ dị: n'elu, aka nri, ala na aka ekpe kwadoro. A na-egosipụta ntụzịaka mgbe ị na-eji Bootstrap na 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>
Wepụ na ịpị ọzọ
Jiri focus
mkpalite chụpụ popovers na ọpịpị ọzọ onye ọrụ nke ihe dị iche karịa mmewere mgbanwe.
Akara akara akọwapụtara achọrọ maka ịchụpụ-na-esote-pịa
Maka ezigbo ihe nchọgharị na omume cross-platform, ị ga-eji <a>
mkpado, ọ bụghị mkpado <button>
, na ị ga-etinyerịrị tabindex
àgwà.
<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'
})
Ihe ndị nwere nkwarụ
Ihe ndị nwere disabled
njirimara ahụ anaghị emekọrịta ihe, nke pụtara na ndị ọrụ enweghị ike ịnyagharị ma ọ bụ pịa ha ka ha kpalite popover (ma ọ bụ Tooltip). Dị ka ihe na-arụ ọrụ, ị ga-achọ ịkpalite popover site na ihe mkpuchi <div>
ma ọ bụ <span>
, nke emebere nke ọma na ahụigodo-elekwasị anya na iji tabindex="0"
.
Maka mkpalite popover nwere nkwarụ, ị nwekwara ike ịhọrọ data-bs-trigger="hover focus"
ka popover pụta dị ka nzaghachi anya ozugbo nye ndị ọrụ gị ka ha nwere ike ọ gaghị atụ anya ịpị ihe nwere nkwarụ.
<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
Mgbanwe
$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);
Ojiji
Kwado popovers site na Javascript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Ime popovers na-arụ ọrụ maka ahụigodo yana ndị ọrụ teknụzụ enyemaka
Iji mee ka ndị ọrụ ahụigodo mee ka popovers gị rụọ ọrụ, ị ga-etinye naanị ya na ihe HTML bụ nke a na-eme n'ọdịnala kiiboodu na mmekọrịta (dị ka njikọ ma ọ bụ njikwa ụdị). Ọ bụ ezie na ihe HTML aka ike (dị ka <span>
s) nwere ike ime ka a na-elekwasị anya site n'ịgbakwunye tabindex="0"
àgwà ahụ, nke a ga-agbakwunye nkwụsị nke nwere ike iwe iwe na mgbagwoju anya na ihe ndị na-adịghị emekọrịta ihe maka ndị ọrụ keyboard, na ọtụtụ teknụzụ enyemaka anaghị ekwupụta ọdịnaya popover n'ọnọdụ a. . Na mgbakwunye, adaberela naanị dị hover
ka ihe na-akpalite popovers gị, n'ihi na nke a ga-eme ka ha ghara ịkpalite ndị ọrụ ahụigodo.
Ọ bụ ezie na ị nwere ike ịtinye ọgaranya, HTML ahaziri ahazi na popovers na html
nhọrọ, anyị na-akwadosi ike ka ị zere itinye oke ọdịnaya. Ụzọ popovers na-arụ ọrụ ugbu a bụ na, ozugbo egosipụtara, ọdịnaya ha na-ejikọta na ihe na-akpalite ya na aria-describedby
àgwà ahụ. N'ihi ya, a ga-akpọsa ndị ọrụ teknụzụ na-enyere aka na ọdịnaya popover niile dị ka iyi ogologo na-akwụsịghị akwụsị.
Na mgbakwunye, ebe ọ ga-ekwe omume ịgụnye njikwa mmekọrịta (dị ka ụdị ụdị ma ọ bụ njikọ) na popover gị (site n'ịgbakwunye ihe ndị a na allowList
njirimara na mkpado ekwenyere), mara na ugbu a popover anaghị ejikwa usoro nlebara anya keyboard. Mgbe onye ọrụ ahụigodo meghere popover, a na-elekwasị anya na ihe na-akpalite, na ebe ọ bụ na popover anaghị agbaso ihe mkpalite na nhazi akwụkwọ ahụ ozugbo, enweghị nkwa na ịga n'ihu / ịpị.TABga-ebugharị onye ọrụ ahụigodo n'ime popover n'onwe ya. Na nkenke, naanị ịgbakwụnye njikwa mmekọrịta na popover nwere ike ime ka njikwa ndị a ghara ịnweta/enweghị ike iji ya maka ndị ọrụ keyboard na ndị na-eji teknụzụ enyemaka, ma ọ bụ ma ọ dịkarịa ala mee ka usoro elekwasị anya na-ezighi ezi. N'okwu ndị a, tụlee iji modal dialog kama.
Nhọrọ
Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-bs-
, dị ka ọ dị na data-bs-animation=""
. Gbaa mbọ hụ na ị gbanwee ụdị ikpe nke aha nhọrọ site na camelCase gaa na kebab-case mgbe ị na-agafe nhọrọ site na njirimara data. Dịka ọmụmaatụ, kama iji data-bs-customClass="beautifier"
, jiri data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, na
nhọrọ site na iji njirimara data.allowList
Aha | Ụdị | Ọdabara | Nkọwa |
---|---|---|---|
animation |
boolean | true |
Tinye mgbanwe mgbanwe CSS na popover |
container |
eriri | mmewere | ụgha | false |
Na-agbakwunye popover na otu mmewere. Ọmụmaatụ |
content |
eriri | mmewere | ọrụ | '' |
Uru ọdịnaya ezighi ezi ma ọ bụrụ Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na |
delay |
nọmba | ihe | 0 |
Ngosipụta na izobe popover (ms) - anaghị emetụta ụdị mkpalite aka Ọ bụrụ na ewepụtara nọmba, a na-etinye igbu oge na ma zoo/egosi Nhazi ihe bụ: |
html |
boolean | false |
Fanye HTML n'ime popover. Ọ bụrụ ụgha, innerText a ga-eji ihe onwunwe tinye ọdịnaya n'ime DOM. Jiri ederede ma ọ bụrụ na ị na-echegbu onwe gị maka mwakpo XSS. |
placement |
eriri | ọrụ | 'right' |
Otu esi edobe popover - akpaaka | n'elu | ala | aka ekpe | nri. Mgbe a na-eji ọrụ iji chọpụta ntinye, a na-akpọ ya na popover DOM node dị ka arụmụka mbụ ya na ihe na-akpali akpali DOM node dị ka nke abụọ ya. A |
selector |
eriri | ụgha | false |
Ọ bụrụ na enyere onye nhọpụta, a ga-ekenyefe ihe popover na ebumnuche ndị akọwapụtara. Na omume, a na-eji nke a mee ka ọdịnaya HTML dị ike ka agbakwunyere popovers. Hụ nke a na ihe atụ na-enye nkọwa . |
template |
eriri | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Ntọala HTML iji mee ihe mgbe ị na-emepụta popover. A A
Ihe mkpuchi nke dị n'elu kwesịrị inwe |
title |
eriri | mmewere | ọrụ | '' |
Uru aha ndabara ma ọ bụrụ Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na |
trigger |
eriri | 'click' |
Kedu ka esi eme popover - pịa | hover | lekwasịrị anya | akwụkwọ ntuziaka. Ị nwere ike ịgafe ọtụtụ ihe mkpali; kewaa ha na oghere. manual enweghị ike ijikọ ya na mkpalite ọ bụla ọzọ. |
fallbackPlacements |
n'usoro | ['top', 'right', 'bottom', 'left'] |
Kọwaa ebe ndaghachi azụ site n'inye ndepụta ntinye n'usoro (n'usoro masịrị gị). Maka ozi ndị ọzọ rụtụ aka na akwụkwọ omume Popper |
boundary |
eriri | mmewere | 'clippingParents' |
Oke mmachi oke oke nke popover (na-emetụta naanị Popper's preventOverflow modifier). Site na ndabara ọ 'clippingParents' nwere ike nabata ntụaka HTMLElement (site na Javascript naanị). Maka ozi ndị ọzọ rụtụ aka na docs detectOverflow nke Popper . |
customClass |
eriri | ọrụ | '' |
Tinye klaasị na popover mgbe egosiri ya. Rịba ama na a ga-agbakwunye klaasị ndị a na mgbakwunye na klaasị ọ bụla akọwapụtara na ndebiri. Ka ịgbakwunye ọtụtụ klaasị, kewaa ha na oghere: Ị nwekwara ike ịgafe ọrụ kwesịrị iweghachi otu eriri nwere aha klaasị agbakwunyere. |
sanitize |
boolean | true |
Kwado ma ọ bụ gbanyụọ nhichapụ ahụ. Ọ bụrụ na agbanyere ya 'template' , 'content' a 'title' ga-ehichapụkwa nhọrọ. Hụ ngalaba sanitizer na akwụkwọ Javascript anyị . |
allowList |
ihe | Uru ndabara | Ihe nwere njirimara na mkpado ekwenyere |
sanitizeFn |
efu | ọrụ | null |
N'ebe a, ị nwere ike ịnye ọrụ ịdị ọcha nke gị. Nke a nwere ike ịba uru ma ọ bụrụ na-amasị gị iji ọbá akwụkwọ raara onwe ya nye iji rụpụta ịdị ọcha. |
offset |
n'usoro | eriri | ọrụ | [0, 8] |
Mwepu nke popover n'ihe metụtara ebumnuche ya. Ị nwere ike ịnyefe eriri n'ime njirimara data yana ụkpụrụ kewapụrụ rịkọm dị ka: Mgbe a na-eji ọrụ chọpụta nkwụghachi ụgwọ, a na-akpọ ya na ihe nwere ntinye popper, akwụkwọ ntụaka, na popper rects dị ka arụmụka mbụ ya. A na-agafe oghere DOM na-akpalite dị ka arụmụka nke abụọ. Ọrụ ahụ ga-eweghachite n'usoro nwere ọnụọgụ abụọ: . Maka ozi ndị ọzọ rụtụ aka na docs offset Popper . |
popperConfig |
efu | ihe | ọrụ | null |
Ka ịgbanwee ndabara Bootstrap Popper config, hụ nhazi nke Popper . Mgbe a na-eji ọrụ mepụta nhazi Popper, a na-akpọ ya na ihe nwere nhazi ndabara nke Bootstrap. Ọ na-enyere gị aka iji ma jikọta ndabara na nhazi nke gị. Ọrụ ahụ ga-eweghachite ihe nhazi maka Popper. |
Njirimara data maka popovers n'otu n'otu
Enwere ike ịkọwa nhọrọ maka popovers n'otu n'otu site na iji njirimara data, dịka akọwara n'elu.
Iji ọrụ napopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Ụzọ
Ụzọ asynchronous na ntụgharị
Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .
gosi
Na-ekpughe popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri popover (ya bụ, tupu shown.bs.popover
mmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover. Popovers nke aha na ọdịnaya ha bụ efu-ogologo anaghị egosipụta.
myPopover.show()
zoo
Na-ezobe popover nke mmewere. Na-alaghachikwuru onye na-akpọ oku tupu ezobe popover (ya bụ tupu hidden.bs.popover
mmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover.
myPopover.hide()
tụgharịa
Na-atụgharị popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ zoo popover (ya bụ tupu ihe omume shown.bs.popover
ma ọ bụ hidden.bs.popover
ihe emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover.
myPopover.toggle()
tufuo
Na-ezo ma na-emebi popover nke mmewere (na-ewepụ data echekwara na mmewere DOM). Popovers na-eji ndị nnọchiteanya (nke a na-emepụta site na iji selector
nhọrọ ) enweghị ike ibibi n'otu n'otu na ihe na-akpali akpali.
myPopover.dispose()
mee ka
Na-enye popover nke mmewere ikike igosi ya. Agbanyere popovers site na ndabara.
myPopover.enable()
gbanyụọ
Na-ewepụ ikike igosi popover element. A ga-enwe ike igosi popover naanị ma ọ bụrụ na agbanyere ya ọzọ.
myPopover.disable()
Agbanyere ngbanwe
Na-atụgharị ikike igosi ma ọ bụ zobe ihe popover nke ihe.
myPopover.toggleEnabled()
imelite
Na-emelite ọnọdụ popover element.
myPopover.update()
nweta ihe atụ
Usoro static nke na-enye gị ohere ịnweta ihe atụ popover jikọtara ya na ihe DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
nwetaOrCreateInstance
Usoro static nke na-enye gị ohere ịnweta ihe atụ popover jikọtara ya na ihe DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Ihe omume
Ụdị mmemme | Nkọwa |
---|---|
gosi.bs.popover | Ihe omume a na-agba ọkụ ozugbo show a na-akpọ usoro ihe atụ. |
egosiri.bs.popover | A na-agbapụ ihe omume a mgbe onye ọrụ mere ka popover ahụ hụ ya (ga-echere mgbanwe CSS ka agwụchaa). |
zoo.bs.popover | A na-agbapụ ihe omume a ozugbo hide a kpọrọ usoro ihe atụ. |
zoro ezo.bs.popover | A na-agbapụ ihe omume a mgbe ezoro ezoro onye ọrụ ahụ popover (ga-echere mgbanwe CSS ka agwụchaa). |
etinyere.bs.popover | Emere mmemme a ka emechara ihe show.bs.popover omume mgbe agbakwunyere ndebiri popover na DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})