Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
in English

Popovers

Dokumentasie en voorbeelde vir die byvoeging van Bootstrap-opspringers, soos dié wat in iOS gevind word, by enige element op jou werf.

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.
By verstek gebruik hierdie komponent die ingeboude inhoudreiniger, wat enige HTML-elemente wat nie eksplisiet toegelaat word nie, verwyder. Sien die ontsmettingsmiddel-afdeling in ons JavaScript-dokumentasie vir meer besonderhede.
Die animasie-effek van hierdie komponent is afhanklik van die prefers-reduced-motionmedianavraag. Sien die verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .

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.

Spesifieke opmaak word vereis vir wegmaak-met-volgende-klik

Vir behoorlike kruisblaaier- en kruisplatformgedrag, moet jy die <a>merker gebruik, nie die <button>merker nie, en jy moet ook 'n tabindexkenmerk insluit.

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

Om popovers te laat werk vir sleutelbord- en hulptegnologiegebruikers

Om sleutelbordgebruikers toe te laat om jou popovers te aktiveer, moet jy dit net by HTML-elemente voeg wat tradisioneel sleutelbordfokusbaar en interaktief is (soos skakels of vormkontroles). Alhoewel arbitrêre HTML-elemente (soos <span>s) fokusbaar gemaak kan word deur die tabindex="0"kenmerk by te voeg, sal dit potensieel irriterende en verwarrende tabstops op nie-interaktiewe elemente vir sleutelbordgebruikers byvoeg, en die meeste ondersteunende tegnologieë kondig tans nie die popover se inhoud aan in hierdie situasie . Moet ook nie net staatmaak hoveras die sneller vir jou popovers nie, want dit sal dit onmoontlik maak om dit vir sleutelbordgebruikers te aktiveer.

Alhoewel jy ryk, gestruktureerde HTML in popovers kan invoeg met die htmlopsie, beveel ons sterk aan dat jy vermy om 'n oormatige hoeveelheid inhoud by te voeg. Die manier waarop popovers tans werk, is dat, sodra dit vertoon is, hul inhoud gekoppel is aan die sneller-element met die aria-describedbykenmerk. Gevolglik sal die hele inhoud van die popover aan ondersteunende tegnologiegebruikers aangekondig word as een lang, ononderbroke stroom.

Daarbenewens, alhoewel dit moontlik is om ook interaktiewe kontroles (soos vormelemente of skakels) in jou popover in te sluit (deur hierdie elemente by die allowListvan toegelate kenmerke en etikette te voeg), moet jy bewus wees dat tans die popover nie sleutelbordfokusvolgorde bestuur nie. Wanneer 'n sleutelbordgebruiker 'n popover oopmaak, bly fokus op die snellerelement, en aangesien die popover gewoonlik nie onmiddellik die sneller in die dokument se struktuur volg nie, is daar geen waarborg dat vorentoe beweeg/druk nie.TABsal 'n sleutelbordgebruiker na die popover self skuif. Kortom, die toevoeging van interaktiewe kontroles by 'n popover sal waarskynlik hierdie kontroles onbereikbaar/onbruikbaar maak vir sleutelbordgebruikers en gebruikers van ondersteunende tegnologieë, of ten minste 'n onlogiese algehele fokusvolgorde maak. In hierdie gevalle, oorweeg dit om eerder 'n modale dialoog te gebruik.

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

sanitizeLet daarop dat die , sanitizeFn, en allowListopsies om sekuriteitsredes nie met behulp van data-kenmerke verskaf kan word nie.
Naam Tik Verstek Beskrywing
animation boolean true Pas 'n CSS-vervaag-oorgang toe op die popover
container tou | element | onwaar false

Voeg die popover by 'n spesifieke element. Voorbeeld: container: 'body'. Hierdie opsie is veral nuttig omdat dit jou in staat stel om die opspringer in die vloei van die dokument naby die snellerelement te plaas - wat sal verhoed dat die opspringer wegdryf van die snellerelement tydens 'n venstergrootteverandering.

content tou | element | funksie ''

Verstek inhoudwaarde as data-bs-contentkenmerk nie teenwoordig is nie.

As 'n funksie gegee word, sal dit genoem word met sy thisverwysing ingestel na die element waaraan die popover gekoppel is.

delay nommer | voorwerp 0

Vertraag wys en verberg die popover (ms) - is nie van toepassing op handmatige snellertipe nie

As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys

Voorwerpstruktuur is:delay: { "show": 500, "hide": 100 }

html boolean false Voeg HTML in die popover. Indien onwaar, innerTextsal eiendom gebruik word om inhoud in die DOM in te voeg. Gebruik teks as jy bekommerd is oor XSS-aanvalle.
placement tou | funksie 'right'

Hoe om die popover te plaas - outomaties | top | onderste | links | reg.
Wanneer autogespesifiseer word, sal dit die popover dinamies heroriënteer.

Wanneer 'n funksie gebruik word om die plasing te bepaal, word dit opgeroep met die popover DOM-nodus as sy eerste argument en die snellerelement DOM-nodus as sy tweede. Die thiskonteks is ingestel op die popover-instansie.

selector tou | onwaar false As 'n kieser verskaf word, sal popover-objekte na die gespesifiseerde teikens gedelegeer word. In die praktyk word dit gebruik om dinamiese HTML-inhoud in staat te stel om popovers by te voeg. Sien hierdie en 'n insiggewende voorbeeld .
template string '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Baseer HTML om te gebruik wanneer die popover geskep word.

Die popover's titlesal in die .popover-header.

Die popover's contentsal in die .popover-body.

.popover-arrowsal die popover se pyl word.

Die buitenste omhulselelement moet die .popoverklas hê.

title tou | element | funksie ''

Verstek titelwaarde as titlekenmerk nie teenwoordig is nie.

As 'n funksie gegee word, sal dit genoem word met sy thisverwysing ingestel na die element waaraan die popover gekoppel is.

trigger string 'click' Hoe popover geaktiveer word - klik | beweeg | fokus | handleiding. Jy kan verskeie snellers slaag; skei hulle met 'n spasie. manualkan nie met enige ander sneller gekombineer word nie.
fallbackPlacements skikking ['top', 'right', 'bottom', 'left'] Definieer terugvalplasings deur 'n lys van plasings in 'n skikking te verskaf (in volgorde van voorkeur). Vir meer inligting, verwys na Popper se gedragsdokumente
boundary tou | element 'clippingParents' Oorloop beperking grens van die oorloop (geld slegs vir Popper se voorkom Oorloop wysiger). By verstek is 'clippingParents'en kan dit 'n HTMLElement-verwysing aanvaar (slegs via JavaScript). Vir meer inligting, verwys na Popper se detectOverflow-dokumente .
customClass tou | funksie ''

Voeg klasse by die popover wanneer dit gewys word. Let daarop dat hierdie klasse bygevoeg sal word bykomend tot enige klasse wat in die sjabloon gespesifiseer word. Om veelvuldige klasse by te voeg, skei hulle met spasies: 'class-1 class-2'.

Jy kan ook 'n funksie deurgee wat 'n enkele string moet terugstuur wat bykomende klasname bevat.

sanitize boolean true Aktiveer of deaktiveer die ontsmetting. Indien geaktiveer 'template', 'content'en 'title'opsies sal ontsmet word. Sien die ontsmettingsmiddel-afdeling in ons JavaScript-dokumentasie .
allowList voorwerp Standaard waarde Voorwerp wat toegelate eienskappe en etikette bevat
sanitizeFn nul | funksie null Hier kan jy jou eie ontsmettingsfunksie verskaf. Dit kan nuttig wees as jy verkies om 'n toegewyde biblioteek te gebruik om ontsmetting uit te voer.
offset skikking | tou | funksie [0, 8]

Offset van die popover relatief tot sy teiken. Jy kan 'n string in data-kenmerke met kommageskeide waardes deurgee soos:data-bs-offset="10,20"

Wanneer 'n funksie gebruik word om die offset te bepaal, word dit opgeroep met 'n objek wat die drukkerplasing, die verwysing en drukkerrekse as sy eerste argument bevat. Die snellerelement DOM-nodus word as die tweede argument deurgegee. Die funksie moet 'n skikking met twee getalle terugstuur: .[skidding, distance]

Vir meer inligting, verwys na Popper se offset-dokumente .

popperConfig nul | voorwerp | funksie null

Sien Popper se konfigurasie om Bootstrap se verstek Popper-konfigurasie te verander .

Wanneer 'n funksie gebruik word om die Popper-konfigurasie te skep, word dit genoem met 'n voorwerp wat die Bootstrap se verstek Popper-konfigurasie bevat. Dit help jou om die verstek met jou eie konfigurasie te gebruik en saam te voeg. Die funksie moet 'n konfigurasie-objek vir Popper terugstuur.

Data-kenmerke vir individuele popovers

Opsies vir individuele popovers kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke, soos hierbo verduidelik.

Die gebruik van funksie metpopperConfig

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

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting .

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

Soort gebeurtenis Beskrywing
show.bs.popover Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
gewys.bs.popover Hierdie gebeurtenis word afgevuur wanneer die opspringer sigbaar gemaak is vir die gebruiker (sal wag vir CSS-oorgange om te voltooi).
versteek.bs.popover Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
versteekte.bs.popover Hierdie gebeurtenis word afgevuur wanneer die popover klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).
ingevoeg.bs.popover Hierdie gebeurtenis word afgevuur na die show.bs.popovergebeurtenis wanneer die popover-sjabloon by die DOM gevoeg is.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})