Dagiti Popovers

Panangkita iti pakabuklan

Dagiti banag nga ammuen no agusar ti popover plugin:

• Agpannuray dagiti Popovers iti 3rd party library Popper para iti panagposision. Masapul nga iramanmo ti popper.min.js sakbay ti bootstrap.js wenno usarem ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper tapno agtrabaho dagiti popovers!
• Dagiti Popovers ket agkasapulan ti tooltip plugin a kas maysa a panagpanpanunot.
• Dagiti popovers ket opt-in para kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
• Zero-length titleken contentvalues ​​ket pulos a di mangipakita iti popover.
• Ibaga container: 'body'tapno maliklikan dagiti parikut ti panagiparang kadagiti ad-adu a komplikado a paset (kas dagiti grupo ti panagserrektayo, dagiti grupo ti buton, kdpy).
• Saan nga agtrabaho ti panangtignay kadagiti popover kadagiti nailemmeng nga elemento.
• Dagiti popovers para .disabledwenno disableddagiti elemento ket masapul a mai-trigger iti maysa nga elemento ti balkot.
• No mai-trigger manipud kadagiti angkla a mangbalkot iti adu a linia, dagiti popover ket maisentro iti nagbaetan ti pakabuklan a kalawa dagiti angkla. Usaren .text-nowrapti <a>s-mo tapno maliklikan daytoy a kababalin.
• Masapul a mailemmeng dagiti popovers sakbay a maikkat dagiti katupagda nga elemento manipud iti DOM.
• Mabalin a mai-trigger dagiti popovers gapu iti elemento iti uneg ti shadow DOM.

Itultuloymo ti agbasa tapno makitam no kasano nga agtrabaho dagiti popover babaen ti sumagmamano a pagarigan.

Pagarigan: Pagbalinen dagiti popovers iti sadinoman

Ti maysa a wagas a mangirugi kadagiti amin a popover iti maysa a panid ket isu koma ti panangpili kadagitoy babaen ti data-bs-toggleattributeda:

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

Pagarigan: Panangusar iti containerpagpilian

No addaanka kadagiti sumagmamano nga estilo iti nagannak nga elemento a mangsinga iti popover, kayatmo nga ikeddeng ti maysa a kostumbre containertapno ti HTML ti popover ket agparang ketdi iti uneg dayta nga elemento.

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

Pagwadan

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

Uppat a direksion

Uppat a pagpilian ti magun-odan: ngato, kannawan, baba, ken kannigid a naitunos. Dagiti direksion ket maisarming no agus-usar ti Bootstrap iti 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>

Dismiss iti sumaruno nga i-click

Usaren ti focusgatilio tapno mailaksid dagiti popover iti sumaganad a panagpidut ti agar-aramat iti sabali nga elemento ngem ti elemento ti panagbalbaliw.

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

Dagiti baldado nga elemento

Dagiti elemento nga addaan iti disabledattribute ket saan nga interaktibo, kayatna a sawen a dagiti agar-aramat ket dida mabalin ti ag-hover wenno ag-klik kadagitoy tapno mangtignay ti popover (wenno tooltip). Kas maysa a panagliklik, kayatmo a mangtignay ti popover manipud iti maysa a wrapper <div>wenno <span>, nasayaat a naaramid a teklado-a-maipamaysa babaen ti panagusar ti tabindex="0".

Para kadagiti baldado a popover a mangtignay, mabalinmo pay a kaykayat data-bs-trigger="hover focus"tapno ti popover ket agparang a kas ti dagus a biswal a sungbat kadagiti agar-aramatmo a kas mabalin a dida namnamaen a mangi -klik iti maysa a baldado nga elemento.

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

Dagiti Variable

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

Panagusar

Pagbalinen dagiti popover babaen ti JavaScript:

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

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-animation="". Siguraduen a baliwan ti kita ti kaso ti nagan ti pagpilian manipud iti camelCase iti kebab-case no ipasa dagiti pagpilian babaen dagiti attribute ti datos. Kas pagarigan, imbes nga usarem ti data-bs-customClass="beautifier", usarem ti data-bs-custom-class="beautifier".

Usar ti function nga addaanpopperConfig

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

Dagiti Pamay-an

ipakita

Ipalgakna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti popover (kayatna a sawen sakbay a shown.bs.popovermapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti popover. Dagiti popover a ti paulo ken linaonda ket agpada a zero-length ket saan a pulos a maiparang.

myPopover.show()

aglemmeng

Ilemmengna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti popover (kayatna a sawen sakbay a hidden.bs.popovermapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti popover.

myPopover.hide()

ag-toggle nga

I-toggles ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti popover (kayatna a sawen sakbay a mapasamak ti shown.bs.popoverwenno hidden.bs.popoverpasamak). Maibilang daytoy a “manual” a panangtignay iti popover.

myPopover.toggle()

ibelleng

Ilemmeng ken dadaelen ti popover ti maysa nga elemento (Ikkaten ti naidulin a datos iti elemento ti DOM). Dagiti popover nga agus-usar ti delegasion (a naparsua babaen ti panagusar ti selectorpagpilian ) ket saan a mabalin a saggaysa a madadael kadagiti kaputotan a mangtignay nga elemento.

myPopover.dispose()

pagbalinen

Mangted ti popover ti maysa nga elemento ti abilidad a maipakita. Dagiti popover ket napalubosan babaen ti default.

myPopover.enable()

awan ti kabaelan

Ikkaten ti abilidad para iti popover ti maysa nga elemento a maipakita. Mabalin laeng a maipakita ti popover no ma-enable manen.

myPopover.disable()

toggleNaipalubosan

I-toggles ti abilidad para iti popover ti maysa nga elemento a maipakita wenno mailemmeng.

myPopover.toggleEnabled()

pabaroen

Ipabaro ti posision ti popover ti maysa nga elemento.

myPopover.update()

makaala tiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti popover a pagarigan a nainaig iti maysa nga elemento ti DOM

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

makaalaWennoAgaramid itiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti popover a pagarigan a nainaig iti maysa nga elemento ti DOM, wenno mangpartuat ti baro no kas pagarigan saan a nairugi

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

Dagiti Pasamak

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