Popovers

Oorsig

Dinge om te weet wanneer jy die popover-inprop gebruik:

• Popovers maak staat op die derdeparty-biblioteek Popper vir posisionering. Jy moet popper.min.js voor bootstrap.js insluit of bootstrap.bundle.min.js/ bootstrap.bundle.jswat Popper bevat gebruik sodat popovers kan werk!
• Popovers vereis die tooltip-inprop as 'n afhanklikheid.
• Popovers is intekening vir prestasieredes, so jy moet dit self inisialiseer .
• Zero-lengte titleen contentwaardes sal nooit 'n popover wys nie.
• Spesifiseer container: 'body'om te verhoed dat probleme in meer komplekse komponente weergegee word (soos ons invoergroepe, knoppiegroepe, ens.).
• Om popovers op versteekte elemente te aktiveer sal nie werk nie.
• Popovers vir .disabledof disabledelemente moet op 'n omhulelement geaktiveer word.
• Wanneer dit geaktiveer word vanaf ankers wat oor veelvuldige lyne draai, sal popovers gesentreer word tussen die ankers se algehele breedte. Gebruik .text-nowrapop jou <a>s om hierdie gedrag te vermy.
• Popovers moet versteek word voordat hul ooreenstemmende elemente uit die DOM verwyder is.
• Popovers kan geaktiveer word danksy 'n element binne 'n skadu-DOM.

Hou aan om te lees om te sien hoe popovers werk met 'n paar voorbeelde.

Voorbeeld: Aktiveer popovers oral

Een manier om alle opspringers op 'n bladsy te inisialiseer, is om hulle volgens hul data-bs-togglekenmerk te kies:

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

Voorbeeld: Gebruik die containeropsie

Wanneer jy 'n paar style op 'n ouerelement het wat inmeng met 'n opspringer, sal jy 'n pasgemaakte wil spesifiseer containersodat die opspringer se HTML eerder binne daardie element verskyn.

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

Voorbeeld

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

Vier rigtings

Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn. Aanwysings word weerspieël wanneer Bootstrap in RTL gebruik word.

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

Maak toe met die volgende klik

Gebruik die focussneller om opspringers op die gebruiker se volgende klik van 'n ander element as die wissel-element af te maak.

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

Gedeaktiveerde elemente

Elemente met die disabledkenmerk is nie interaktief nie, wat beteken dat gebruikers nie kan beweeg of daarop klik om 'n popover (of nutswenk) te aktiveer nie. As 'n oplossing, sal jy die popover wil aktiveer vanaf 'n omhulsel <div>of <span>, ideaal gemaak sleutelbord-fokusbaar met tabindex="0".

Vir gedeaktiveerde popover-snellers, kan jy ook verkies data-bs-trigger="hover focus"dat die popover as onmiddellike visuele terugvoer aan jou gebruikers verskyn, aangesien hulle dalk nie verwag om op 'n gedeaktiveerde element te klik nie.

<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

Veranderlikes

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

Gebruik

Aktiveer popovers via JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-bs-, soos in data-bs-animation="". Maak seker dat jy die kastipe van die opsienaam verander van camelCase na kebab-case wanneer die opsies deur data-kenmerke deurgegee word. Byvoorbeeld, in plaas van om te gebruik data-bs-customClass="beautifier", gebruik data-bs-custom-class="beautifier".

Die gebruik van funksie metpopperConfig

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

Metodes

Wys

Onthul 'n element se popover. Keer terug na die oproeper voordat die popover werklik gewys is (dws voor die shown.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover. Popovers waarvan die titel en inhoud beide nul-lengte is, word nooit vertoon nie.

myPopover.show()

wegsteek

Versteek 'n element se popover. Keer terug na die beller voordat die popover eintlik versteek is (dws voor die hidden.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.

myPopover.hide()

wissel

Wissel 'n element se popover. Keer terug na die beller voordat die popover werklik gewys of versteek is (dws voordat die shown.bs.popoverof hidden.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.

myPopover.toggle()

wegdoen

Versteek en vernietig 'n element se popover (Verwyder gestoorde data op die DOM-element). Popovers wat delegering gebruik (wat met die selectoropsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.

myPopover.dispose()

aktiveer

Gee 'n element se popover die vermoë om gewys te word. Popovers is by verstek geaktiveer.

myPopover.enable()

deaktiveer

Verwyder die vermoë vir 'n element se popover om gewys te word. Die opspringer sal slegs gewys kan word as dit weer geaktiveer is.

myPopover.disable()

toggleAktiveer

Wissel die vermoë vir 'n element se popover om gewys of versteek te word.

myPopover.toggleEnabled()

Opdateer

Dateer die posisie van 'n element se popover op.

myPopover.update()

getInstance

Statiese metode waarmee u die popover-instansie kan kry wat met 'n DOM-element geassosieer word

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

getOrCreateInstance

Statiese metode wat jou toelaat om die popover-instansie te kry wat met 'n DOM-element geassosieer word, of 'n nuwe een te skep ingeval dit nie geïnisialiseer is nie

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

Gebeurtenisse

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