Popovers

Ülevaade

Asjad, mida popover-plugina kasutamisel teada saada:

• Popoverid kasutavad positsioneerimiseks kolmanda osapoole raamatukogu Popper . Popoverite toimimiseks peate lisama popper.min.js enne bootstrap.js-i või kasutama nuppu bootstrap.bundle.min.js/ bootstrap.bundle.js, mis sisaldab Popperit!
• Hüpikaknad nõuavad tööriistavihje pluginat sõltuvusena.
• Hüpikaknad on jõudluse huvides lubatud, seega peate need ise lähtestama .
• Nullpikkus titleja contentväärtused ei näita kunagi hüpikaknaid.
• Määrake container: 'body', et vältida renderdamisprobleeme keerukamates komponentides (nt meie sisendrühmad, nupurühmad jne).
• Peidetud elementide hüpikaknade käivitamine ei toimi.
• Elementide .disabledvõi disabledelementide hüpikaknad tuleb käivitada ümbriselemendil.
• Kui hüpikaknad käivitatakse ankrute kaudu, mis keerduvad üle mitme joone, tsentreeritakse hüpikaknad ankrute üldlaiuse vahele. Sellise käitumise vältimiseks kasutage .text-nowrapseda oma peal .<a>
• Hüpikaknad tuleb peita enne, kui nende vastavad elemendid on DOM-ist eemaldatud.
• Hüpikaknaid saab käivitada tänu vari-DOM-i sees olevale elemendile.

Jätkake lugemist, et näha, kuidas hüpikaknad mõne näitega töötavad.

Näide: lubage hüpikaknad kõikjal

Üks viis kõigi lehe hüpikaknate lähtestamiseks on valida need nende data-bs-toggleatribuudi järgi:

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

Näide: containervaliku kasutamine

Kui teil on ülemelemendil mõned stiilid, mis segavad hüpikakna esilekutsumist, soovite määrata kohandatud containerelemendi, nii et hüpikakna HTML kuvatakse selle elemendi sees.

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

Näide

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

Neli suunda

Saadaval on neli valikut: ülemine, parem, alumine ja vasakule joondatud. Kui kasutate RTL-is Bootstrapi, siis juhiseid peegeldatakse.

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

Loobu järgmisel klikil

Kasutage focuspäästikut hüpikaknate tühistamiseks, kui kasutaja järgmisel klõpsul lülituselemendist erineval elemendil klõpsab.

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

Keelatud elemendid

Atribuudiga elemendid disabledei ole interaktiivsed, mis tähendab, et kasutajad ei saa hüpikakna (või kohtspikri) käivitamiseks hõljutada või klõpsata. Lahendusena võiksite käivitada hüpikakna ümbrisest <div>või <span>ideaaljuhul klaviatuurile teravustatavast, kasutades tabindex="0".

Keelatud hüpikakna käivitajate puhul võite eelistada ka data-bs-trigger="hover focus"seda, et hüpikakna kuvatakse kasutajatele vahetu visuaalse tagasisidena, kuna nad ei pruugi eeldada, et nad klõpsavad keelatud elemendil.

<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

Muutujad

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

Kasutamine

Luba hüpikaknad JavaScripti kaudu:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-bs-, nagu data-bs-animation="". Andmeatribuutide kaudu suvandite edastamisel muutke kindlasti valiku nime täpitüüp camelCase asemel kebab-case. Näiteks kasutage selle asemel data-bs-customClass="beautifier", et kasutada data-bs-custom-class="beautifier".

Funktsiooni kasutamine koospopperConfig

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

meetodid

näidata

Näitab elemendi hüpikakna. Naaseb helistaja juurde enne hüpikakna tegelikku näitamist (st enne shown.bs.popoversündmuse toimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks. Hüpikaknaid, mille pealkiri ja sisu on nullpikkused, ei kuvata kunagi.

myPopover.show()

peita

Peidab elemendi hüpikakna. Naaseb helistaja juurde enne, kui hüpikaken on tegelikult peidetud (st enne hidden.bs.popoversündmuse toimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks.

myPopover.hide()

lüliti

Lülitab elemendi hüpikakna välja. Naaseb helistaja juurde enne, kui hüpikaknat on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.popovervõi hidden.bs.popovertoimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks.

myPopover.toggle()

käsutada

Peidab ja hävitab elemendi hüpikakna (Eemaldab DOM-elemendil salvestatud andmed). Delegeerimist kasutavaid hüpikaknaid (mis luuakse suvandiga selector) ei saa järeltulijate päästikuelementidel eraldi hävitada.

myPopover.dispose()

lubada

Annab elemendi hüpikaknale võimaluse seda näidata. Hüpikaknad on vaikimisi lubatud.

myPopover.enable()

keelata

Eemaldab elemendi hüpikakna kuvamise võimaluse. Popoverit saab kuvada ainult siis, kui see on uuesti lubatud.

myPopover.disable()

lülita Lubatud

Lülitab elemendi hüpikakna kuvamise või peitmise võimaluse.

myPopover.toggleEnabled()

värskendada

Värskendab elemendi hüpikakna asukohta.

myPopover.update()

getInstance

Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud hüpikjuhtumi

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

getOrCreateInstance

Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud hüpikjuhtumi või luua uue juhul, kui seda ei lähtestatud

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

Sündmused

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