Popovers

Áttekintés

Tudnivalók a popover beépülő modul használatakor:

• A popover a harmadik fél Popper könyvtárára támaszkodik a pozicionáláshoz. A popper.min.js -t a bootstrap.js elé kell beírni, vagy a bootstrap.bundle.min.js/ bootstrap.bundle.js-t, amely a Poppert tartalmazza, hogy a popover működjön!
• Az előugró ablakokhoz függőségként szükség van az eszköztipp-bővítményre .
• A felugró ablakok teljesítmény miatt engedélyezettek, ezért Önnek kell inicializálnia őket .
• A nulla hosszúság titleés contentaz értékek soha nem fognak felbukkanni.
• Adja meg container: 'body', hogy elkerülje a megjelenítési problémákat az összetettebb összetevőkben (például beviteli csoportjaink, gombcsoportjaink stb.).
• A rejtett elemek felbukkanásának kiváltása nem fog működni.
• .disabledA vagy elemek felbukkanását a disabledburkolóelemen kell aktiválni.
• Ha több vonalon átívelő horgonyok aktiválják, a felugró ablakok a horgonyok teljes szélessége között lesznek középen. Használja .text-nowrapa <a>s-én, hogy elkerülje ezt a viselkedést.
• A felugró ablakokat el kell rejteni, mielőtt a megfelelő elemeiket eltávolítanák a DOM-ból.
• A popoverek az árnyék DOM-on belüli elemnek köszönhetően válthatók ki.

Olvasson tovább, hogy megtudja, hogyan működnek a popoverek néhány példával.

Példa: Engedélyezze a popovereket mindenhol

data-bs-toggleAz oldal összes felugró ablakának inicializálásának egyik módja az lenne, ha attribútumuk alapján választaná ki őket :

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

Példa: Az containeropció használata

Ha egy szülőelemen vannak olyan stílusok, amelyek megzavarják a felbukkanást, akkor meg kell adnia egy egyéni beállítást container, hogy az előugró elem HTML-kódja helyett az adott elemen belül jelenjen meg.

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

Példa

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

Négy irány

Négy lehetőség áll rendelkezésre: felül, jobb, alsó és balra igazítva. A Bootstrap RTL-ben történő használatakor az irányok tükröződnek.

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

Elvetés a következő kattintással

Használja a focustriggert a felugró ablakok elvetésére, amikor a felhasználó a kapcsoló elemtől eltérő elemre kattint következő alkalommal.

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

Letiltott elemek

Az disabledattribútummal rendelkező elemek nem interaktívak, ami azt jelenti, hogy a felhasználók nem vihetik az egérmutatót vagy kattinthatnak rájuk, hogy előugró ablakot (vagy elemleírást) indítsanak el. Megkerülő megoldásként a felbukkanást egy burkolóból <div>vagy <span>ideális esetben a billentyűzetre fókuszálhatóvá kell tenni a segítségével tabindex="0".

A letiltott popover triggereknél azt is előnyben részesítheti data-bs-trigger="hover focus", hogy a felbukkanó üzenet azonnali vizuális visszajelzésként jelenjen meg a felhasználók számára, mivel előfordulhat, hogy nem számítanak rá, hogy egy letiltott elemre kattintanak .

<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

Változók

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

Használat

Előugró ablakok engedélyezése JavaScripten keresztül:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-bs-következőhöz: data-bs-animation="". Ügyeljen arra, hogy a beállításnév esettípusát camelCase-ről kebab-case-re változtassa, amikor a beállításokat adatattribútumokon keresztül adja át. Például a használata helyett data-bs-customClass="beautifier"használja a data-bs-custom-class="beautifier".

A funkció használata apopperConfig

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

Mód

előadás

Felfedi egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne (azaz az shown.bs.popoveresemény bekövetkezte előtt). Ez a popover „kézi” kiváltásának tekinthető. Az olyan felugró ablakok, amelyek címe és tartalma egyaránt nulla hosszúságú, soha nem jelennek meg.

myPopover.show()

elrejt

Elrejti egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen el lett volna rejtve (azaz az hidden.bs.popoveresemény bekövetkezte előtt). Ez a popover „kézi” kiváltásának tekinthető.

myPopover.hide()

kapcsolót

Bekapcsolja az elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne vagy elrejtésre kerülne (azaz a shown.bs.popovervagy hidden.bs.popoveresemény bekövetkezése előtt). Ez a popover „kézi” kiváltásának tekinthető.

myPopover.toggle()

eldob

Elrejti és megsemmisíti egy elem felbukkanását (Eltávolítja a DOM elemen tárolt adatokat). A delegálást használó felugró ablakok (amelyek a selectorbeállítással jönnek létre ) nem semmisíthetők meg egyenként a leszármazott triggerelemeken.

myPopover.dispose()

engedélyezze

Lehetővé teszi, hogy egy elem popover megjelenjen. A popoverek alapértelmezés szerint engedélyezve vannak.

myPopover.enable()

letiltása

Eltávolítja az elem felugró ablakának megjelenítési lehetőségét. A popover csak akkor jelenhet meg, ha újra engedélyezve van.

myPopover.disable()

toggleEnabled

Bekapcsolja az elem felugró ablakának megjelenítését vagy elrejtését.

myPopover.toggleEnabled()

frissítés

Frissíti egy elem popover pozícióját.

myPopover.update()

getInstance

Statikus módszer, amely lehetővé teszi a DOM elemhez társított popover példányt

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

getOrCreateInstance

Statikus metódus, amely lehetővé teszi a DOM elemhez társított popover példányt, vagy új létrehozását, ha nem inicializálták

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

Események

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