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 insluit bootstrap.js, of een gebruik bootstrap.bundle.min.jswat Popper bevat.
• Popovers vereis die popover-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.

Voorbeelde

Aktiveer popovers

Soos hierbo genoem, moet jy popovers inisialiseer voordat hulle gebruik kan word. Een manier om alle opspringers op 'n bladsy te inisialiseer, is om hulle volgens hul data-bs-togglekenmerk te kies, soos so:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Regstreekse demo

Ons gebruik JavaScript soortgelyk aan die brokkie hierbo om die volgende lewendige popover weer te gee. Titels word gestel via data-bs-titleen liggaamsinhoud word gestel via data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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 links. Aanwysings word weerspieël wanneer Bootstrap in RTL gebruik word. Stel data-bs-placementom die rigting te verander.

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

Pasgemaakcontainer

Wanneer jy 'n paar style op 'n ouer-element het wat inmeng met 'n pop-over, sal jy 'n pasgemaakte wil spesifiseer containersodat die opspring se HTML eerder binne daardie element verskyn. Dit is algemeen in responsiewe tabelle, invoergroepe en dies meer.

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

Nog 'n situasie waar jy 'n eksplisiete pasgemaakte sal wil stel, containeris popovers binne 'n modale dialoog , om seker te maak dat die popover self aan die modaal gevoeg is. Dit is veral belangrik vir opspringers wat interaktiewe elemente bevat – modale dialoë sal fokus vasvang, so tensy die opspringer 'n kinderelement van die modale is, sal gebruikers nie hierdie interaktiewe elemente kan fokus of aktiveer nie.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Pasgemaakte popovers

U kan die voorkoms van popovers aanpas deur CSS-veranderlikes te gebruik . Ons stel 'n pasgemaakte klas met data-bs-custom-class="custom-popover"om ons pasgemaakte voorkoms te omvang en gebruik dit om sommige van die plaaslike CSS-veranderlikes te ignoreer.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

Veranderlikes

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik popovers nou plaaslike CSS-veranderlikes aan .popovervir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, so Sass-aanpassing word ook steeds ondersteun.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass veranderlikes

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Gebruik

Aktiveer popovers via JavaScript:

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

Opsies

Aangesien opsies deur data-kenmerke of JavaScript deurgegee kan word, kan jy 'n opsienaam byvoeg data-bs-, soos in data-bs-animation="{value}". Maak seker dat jy die kastipe van die opsienaam verander van " camelCase " na " kebab-case " wanneer die opsies deur data-kenmerke deurgegee word. Gebruik byvoorbeeld in data-bs-custom-class="beautifier"plaas van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteun alle komponente 'n eksperimentele gereserveerde data-kenmerk data-bs-configwat eenvoudige komponentkonfigurasie as 'n JSON-string kan huisves. Wanneer 'n element data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"kenmerke het, sal die finale titlewaarde wees 456en die afsonderlike data-kenmerke sal waardes wat op gegee word, ignoreer data-bs-config. Daarbenewens kan bestaande data-kenmerke JSON-waardes soos data-bs-delay='{"show":0,"hide":150}'.

Die gebruik van funksie metpopperConfig

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

Metodes

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Gebeurtenisse

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