Mafere na isi ọdịnaya Gaa na ntugharị docs
in English

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.jsnke 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 titlena contentụ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 .disabledma ọ 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-nowrapna <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.
Site na ndabara, akụrụngwa a na-eji ihe nchacha ọdịnaya arụnyere arụnyere, nke na-ewepụ ihe HTML ọ bụla anaghị anabata nke ọma. Hụ ngalaba sanitizer na akwụkwọ Javascript anyị maka nkọwa ndị ọzọ.
Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụ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 atụ ụfọdụ.

Ọmụmaatụ: Kwado popovers ebe niile

Otu ụzọ isi bido popovers niile na ibe ga-abụ ịhọrọ ha site na data-bs-togglenjirimara 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 containernhọrọ

Mgbe ị nwere ụdị ụfọdụ na mmewere nne na nna na-egbochi popover, ị ga-achọ ịkọwapụta omenala containerka 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 focusmkpalite 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 disablednjirimara 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 ihe 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ị hoverka 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 htmlnhọ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 allowListnjirimara 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".

Rịba ama na maka nchekwa , enweghị ike ịnye 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ụ container: 'body':. Nhọrọ a bara uru karịsịa n'ihi na ọ na-enye gị ohere idobe popover na ntinye akwụkwọ ahụ n'akụkụ ihe na-akpali akpali - nke ga-egbochi popover ka ọ na-ese n'elu ihe na-akpali akpali n'oge ntụgharị windo.

content eriri | mmewere | ọrụ ''

Uru ọdịnaya ezighi ezi ma ọ bụrụ data-bs-contentna njirimara adịghị.

Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na thisnrụtụ aka ya nke etinyere na popover.

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

html boolean false Fanye HTML n'ime popover. Ọ bụrụ ụgha, innerTexta 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 autoakọwapụtara ya, ọ ga-emegharịgharị popover nke ukwuu.

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. Edebere thisihe gbara ya gburugburu ka ọ bụrụ ihe atụ popover.

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 titlega-agbaba popover n'ime .popover-header.

A contentga-agbaba popover n'ime .popover-body.

.popover-arrowga-abụ akụ popover.

Ihe mkpuchi nke dị n'elu kwesịrị inwe .popoverklaasị.

title eriri | mmewere | ọrụ ''

Uru aha ndabara ma ọ bụrụ titlena njirimara adịghị.

Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na thisnrụtụ aka ya nke etinyere na popover.

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. manualenweghị 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: 'class-1 class-2'.

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

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

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 .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

gosi

Na-ekpughe popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri popover (ya bụ, tupu shown.bs.popovermmemme 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-alaghachikwute onye na-akpọ oku tupu ezobe popover (ya bụ tupu hidden.bs.popovermmemme 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.popoverma ọ bụ hidden.bs.popoverihe 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 nnọchiteanya (nke a na-emepụta site na iji selectornhọ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 showa 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 hidea 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.popoveromume mgbe agbakwunyere ndebiri popover na DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})