Popovers

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.

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.

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

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

Iji ọrụ napopperConfig

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

Ụ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

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})