Iipopovers

Isishwankathelo

Izinto omawuzazi xa usebenzisa iplagi yepopover:

• Abantu abadumileyo baxhomekeke kwithala leencwadi lesithathu iPopper ngokubekwa . Kufuneka ubandakanye popper.min.js phambi bootstrap.js, okanye usebenzise enye bootstrap.bundle.min.jsenePopper.
• I-Popovers ifuna i- plugin ye -popover njengokuxhomekeka.
• IiPopovers zingenile ngenxa yezizathu zokusebenza, ke kufuneka uziqalise ngokwakho .
• Ubude obuziro titlekunye contentnamaxabiso asoze abonise ipopover.
• Cacisa container: 'body'ukunqanda unikezelo lweengxaki kumacandelo antsokothileyo (njengamaqela ethu egalelo, amaqela amaqhosha, njl.njl).
• Ukuxhokonxa iipopovers kwizinto ezifihlakeleyo aziyi kusebenza.
• Iipopovers ze .disabledokanye ielementi kufuneka zivuswe kwinto esongelwayo disabled.
• Xa isenziwa ukusuka kwii-ankile ezisonga kwimigca emininzi, iipopovers ziya kugxininiswa phakathi kobubanzi beankile ngokubanzi. Sebenzisa .text-nowrapkwi yakho <a>ukunqanda le ukuziphatha.
• Iipopovers mazifihlwe phambi kokuba izinto ezihambelanayo zisuswe kwiDOM.
• Iipopovers zinokuvuswa enkosi kwinto engaphakathi kwesithunzi se-DOM.

Qhubeka ufunda ukuze ubone indlela iipopovers ezisebenza ngayo neminye imizekelo.

Imizekelo

Vumela iipopovers

Njengoko kukhankanyiwe ngasentla, kufuneka uqalise iipopovers ngaphambi kokuba zisetyenziswe. Enye indlela yokuqalisa zonke iipopovers kwiphepha iya kuba kukuzikhetha ngophawu lwazo data-bs-toggle, njengaye:

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

Idemo ephilayo

Sisebenzisa iJavaScript efana nesnippet engentla ukunikezela ngoku kulandelayo okuphilayo. Izihloko zisetwa kusetyenziswa data-bs-titlekwaye umxholo womzimba usetwe nge 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>

Iindlela ezine

Zine iinketho ezikhoyo: phezulu, ekunene, ezantsi, nasekhohlo. Izalathiso ziboniswa xa usebenzisa i-Bootstrap kwi-RTL. Seta data-bs-placementukutshintsha indlela.

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

Isikocontainer

Xa unezinye izimbo kwinto yomzali ephazamisana ne-popover, uya kufuna ukukhankanya isiko containerukuze i-HTML ye-popover ivele ngaphakathi kweso siqalelo endaweni yoko. Oku kuqhelekileyo kwiitheyibhile eziphendulayo, amaqela egalelo, kunye nokunye okunjalo.

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

Enye imeko apho uyakufuna ukuseta isiko containerelicacileyo zipopovers ngaphakathi kwincoko yababini yemodal , ukuqinisekisa ukuba ipopover ngokwayo idityaniswe kwimodal. Oku kubaluleke kakhulu kwiipopovers eziqulethe izinto ezisebenzisanayo - iingxoxo zemodal ziyakubamba ugxininiso, ke ngaphandle kokuba ipopover yinto yomntwana wemodali, abasebenzisi abayi kuba nakho ukugxila okanye ukwenza ezi zinto zisebenze.

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

Iipopovers eziqhelekileyo

Unokwenza inkangeleko yeepopovers usebenzisa iCSS variables . Siseta iklasi yesiko data-bs-custom-class="custom-popover"ukuze sijonge inkangeleko yethu yesiko kwaye siyisebenzise ukodlula ezinye zezinto eziguquguqukayo zeCSS zasekhaya.

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

Lahla ngokucofa okulandelayo

Sebenzisa i- focustrigger ukugxotha iipopovers kunqakrazo olulandelayo lomsebenzisi lwento eyahlukileyo kunento yokuguqula.

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

Izinto ezikhubazekileyo

Izinto disabledezinophawu azisebenzi, oku kuthetha ukuba abasebenzisi abanako ukushukuma okanye ukucofa ukuze baqalise ipopover (okanye inqaku lesixhobo). Njengomsebenzi wokusebenza, uya kufuna ukwenza i-popover isuka kwisisonga <div>okanye <span>, yenziwe ngokufanelekileyo ikhibhodi-ijolise ekusebenziseni tabindex="0".

Kwiziphembeleli ze-popover ezikhubazekileyo, unokukhetha kwakhona data-bs-trigger="hover focus"ukuze i-popover ibonakale njengengxelo ebonwayo kwangoko kubasebenzisi bakho njengoko bengenakulindela ukucofa into ekhubazekileyo.

<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

Izinto eziguquguqukayo

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, iipopovers ngoku zisebenzisa iiguquguquko ze-CSS zasekhaya .popoverukuze ziphuculwe ukwenziwa ngokwezifiso kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

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

Iinguqu zeSass

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

Ukusetyenziswa

Vumela iipopovers ngeJavaScript:

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

Iinketho

Njengoko iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript, unokongeza igama lokhetho ku data-bs-, njengakwi data-bs-animation="{value}". Qinisekisa ukuba utshintshe uhlobo lwecala legama lokukhetha ukusuka kwi " camelCase " ukuya kwi " kebab-case " xa udlula iinketho ngeempawu zedatha. Umzekelo, sebenzisa data-bs-custom-class="beautifier"endaweni ye- data-bs-customClass="beautifier".

Ukusukela kwi-Bootstrap 5.2.0, onke amacandelo axhasa umlinganiso wedatha ogciniweyo wovavanyodata-bs-config onokubeka uqwalaselo lwecandelo olulula njengomtya we-JSON. Xa into ineempawu data-bs-config='{"delay":0, "title":123}'kunye data-bs-title="456"neempawu, ixabiso lokugqibela titleliya kuba 456kunye neempawu zedatha eyahlukileyo ziya kuwenza ngaphezulu amaxabiso anikiweyo data-bs-config. Ukongeza, iimpawu zedatha ezikhoyo ziyakwazi ukubeka ixabiso le-JSON njenge data-bs-delay='{"show":0,"hide":150}'.

Ukusebenzisa umsebenzi ngepopperConfig

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

Iindlela

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

Iziganeko

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