Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
in English

Popovers

Dokumentáció és példák Bootstrap felugró ablakok – például az iOS rendszerben találhatók – hozzáadásához a webhely bármely eleméhez.

Á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.
Alapértelmezés szerint ez a komponens a beépített tartalom-fertőtlenítőt használja, amely eltávolítja a kifejezetten nem engedélyezett HTML-elemeket. További részletekért lásd a fertőtlenítő részt JavaScript-dokumentációnkban .
Ennek az összetevőnek az animációs hatása a médialekérdezéstől függ prefers-reduced-motion. Tekintse meg akadálymentesítési dokumentációnk csökkentett mozgással foglalkozó részét .

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.

Speciális jelölés szükséges a következő kattintáskor történő elvetéshez

A megfelelő, több böngésző és platform közötti viselkedés érdekében a címkét kell használnia <a>, nem a <button>címkét, és egy tabindexattribútumot is tartalmaznia kell.

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

Az előugró ablakok működése a billentyűzet és a kisegítő technológiák felhasználói számára

Ahhoz, hogy a billentyűzetet használók aktiválhassák az előugró ablakokat, csak olyan HTML-elemekhez adja hozzá őket, amelyek hagyományosan a billentyűzetre fókuszálhatók és interaktívak (például hivatkozások vagy űrlapvezérlők). Bár tetszőleges HTML-elemek (például <span>s) fókuszálhatóvá tehetők az tabindex="0"attribútum hozzáadásával, ez potenciálisan bosszantó és zavaró tabulátorokat ad a nem interaktív elemekhez a billentyűzet-felhasználók számára, és a legtöbb segítő technológia ebben a helyzetben jelenleg nem jelenti be a popover tartalmát. . Ezenkívül ne hagyatkozzon kizárólag hoveraz előugró ablakok kiváltójára, mivel ez lehetetlenné teszi a billentyűzetet használók számára.

Bár a lehetőséggel gazdag, strukturált HTML-kódot szúrhat be az előugró ablakokba html, erősen javasoljuk, hogy kerülje a túlzott mennyiségű tartalom hozzáadását. Az előugró ablakok jelenleg úgy működnek, hogy a megjelenítést követően tartalmuk az aria-describedbyattribútummal rendelkező trigger elemhez van kötve. Ennek eredményeként a popover teljes tartalma egyetlen hosszú, megszakítás nélküli adatfolyamként jelenik meg a kisegítő technológia felhasználói számára.

Ezenkívül, bár lehetséges, hogy interaktív vezérlőket (például űrlapelemeket vagy hivatkozásokat) is tartalmazzon az előugró ablakban (azáltal, hogy ezeket az elemeket hozzáadja az allowListengedélyezett attribútumokhoz és címkékhez), vegye figyelembe, hogy jelenleg az előugró ablak nem kezeli a billentyűzet fókuszának sorrendjét. Amikor a billentyűzet felhasználója megnyit egy felugró ablakot, a fókusz a kiváltó elemen marad, és mivel az előugró elem általában nem követi azonnal az indítógombot a dokumentum szerkezetében, nincs garancia arra, hogy az előrelépés/lenyomásTABa billentyűzet felhasználóját magába az előugró ablakba helyezi át. Röviden, ha egyszerűen hozzáadunk interaktív vezérlőket egy felugró ablakhoz, ezek a vezérlők valószínűleg elérhetetlenek/használhatatlanok lesznek a billentyűzet-felhasználók és a kisegítő technológiák felhasználói számára, vagy legalábbis logikátlan általános fókuszsorrendet eredményez. Ilyen esetekben fontolja meg egy modális párbeszédpanel használatát.

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

Vegye figyelembe, hogy biztonsági okokból a sanitize, sanitizeFn, és allowListopciók nem adhatók meg adatattribútumokkal.
Név típus Alapértelmezett Leírás
animation logikai érték true Alkalmazzon CSS-eltolási átmenetet az előugró ablakra
container húr | elem | hamis false

Egy adott elemhez fűzi az előugró ablakot. Példa: container: 'body'. Ez az opció különösen hasznos, mivel lehetővé teszi, hogy a felugró ablakot a dokumentum folyamában az indítóelem közelében helyezze el – ami megakadályozza, hogy az ablak átméretezése során a felugró elem elmozduljon a kiváltó elemtől.

content húr | elem | funkció ''

Alapértelmezett tartalomérték, ha data-bs-contentaz attribútum nincs jelen.

Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a thishivatkozása arra az elemre van beállítva, amelyhez a popover kapcsolódik.

delay szám | tárgy 0

A felugró ablak megjelenítésének és elrejtésének késleltetése (ms) – nem vonatkozik a kézi indítótípusra

Ha megad egy számot, akkor a késleltetés mindkét elrejtésre/megjelenítésre vonatkozik

Az objektum szerkezete a következő:delay: { "show": 500, "hide": 100 }

html logikai érték false Szúrjon be HTML-t a felugró ablakba. Ha hamis, a innerTexttulajdonság a tartalom DOM-ba való beillesztésére szolgál. Használjon szöveget, ha aggódik az XSS-támadások miatt.
placement húr | funkció 'right'

Hogyan helyezzük el a popovert - auto | top | alsó | balra | jobb.
Ha automeg van adva, akkor dinamikusan átirányítja a felugró ablakot.

Amikor egy függvényt használunk az elhelyezés meghatározására, akkor az első argumentumként a popover DOM-csomópontot, másodikként pedig a DOM-csomópont kiváltó elemet hívja meg. A thiskontextus a popover példányra van állítva.

selector húr | hamis false Ha rendelkezésre áll választó, a felugró objektumok delegálódnak a megadott célokra. A gyakorlatban ezt arra használják, hogy a dinamikus HTML-tartalomhoz felugró ablakokat adjanak hozzá. Lásd ezt és egy tájékoztató példát .
template húr '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

A popover létrehozásakor használandó alap HTML.

A popovert titlea .popover-header.

A popovert contenta .popover-body.

.popover-arrowa popover nyila lesz.

A legkülső burkolóelemnek az .popoverosztálynak kell lennie.

title húr | elem | funkció ''

Az alapértelmezett címérték, ha titleaz attribútum nincs jelen.

Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a thishivatkozása arra az elemre van beállítva, amelyhez a popover kapcsolódik.

trigger húr 'click' Hogyan történik a popover aktiválása - kattintson a | lebeg | fókusz | kézikönyv. Több triggert is átadhat; szóközzel válassza el őket. manualnem kombinálható semmilyen más triggerrel.
fallbackPlacements sor ['top', 'right', 'bottom', 'left'] Határozza meg a tartalék elhelyezéseket úgy, hogy megadja az elhelyezések listáját tömbben (előnyös sorrendben). További információkért tekintse meg a Popper viselkedési dokumentumait
boundary húr | elem 'clippingParents' A popover túlcsordulási kényszerhatára (csak a Popper-féle preventOverflow módosítóra vonatkozik). Alapértelmezés szerint 'clippingParents'elfogadja a HTMLElement hivatkozást (csak JavaScripten keresztül). További információkért tekintse meg a Popper detectOverflow dokumentumait .
customClass húr | funkció ''

Adjon hozzá osztályokat a felugró ablakhoz, amikor megjelenik. Ne feledje, hogy ezek az osztályok a sablonban megadott bármely osztály mellé kerülnek hozzáadásra. Több osztály hozzáadásához szóközzel válassza el őket: 'class-1 class-2'.

Olyan függvényt is átadhat, amelynek egyetlen karakterláncot kell visszaadnia, amely további osztályneveket tartalmaz.

sanitize logikai érték true Engedélyezze vagy tiltsa le a fertőtlenítést. Ha aktiválva van 'template', 'content'és 'title'az opciók fertőtlenítésre kerülnek. Tekintse meg a fertőtlenítő részt JavaScript dokumentációnkban .
allowList tárgy Alapértelmezett érték Objektum, amely engedélyezett attribútumokat és címkéket tartalmaz
sanitizeFn null | funkció null Itt megadhatja saját fertőtlenítő funkcióját. Ez akkor lehet hasznos, ha inkább egy dedikált könyvtárat szeretne használni a fertőtlenítéshez.
offset tömb | húr | funkció [0, 8]

A popover eltolása a célhoz képest. Az adatattribútumokban átadhat egy karakterláncot vesszővel elválasztott értékekkel, például:data-bs-offset="10,20"

Ha egy függvényt használunk az eltolás meghatározására, akkor egy olyan objektummal hívjuk meg, amely első argumentumaként tartalmazza a popper elhelyezést, a hivatkozást és a popper recteket. A kiváltó elem DOM csomópontja második argumentumként kerül átadásra. A függvénynek egy két számmal rendelkező tömböt kell visszaadnia: .[skidding, distance]

További információkért tekintse meg a Popper-féle eltolási dokumentumokat .

popperConfig null | tárgy | funkció null

A Bootstrap alapértelmezett Popper-konfigurációjának módosításához lásd a Popper konfigurációját .

Ha egy függvényt használunk a Popper-konfiguráció létrehozására, akkor azt egy olyan objektummal hívjuk meg, amely tartalmazza a Bootstrap alapértelmezett Popper-konfigurációját. Segítségével használhatja és egyesítheti az alapértelmezett beállításokat saját konfigurációjával. A függvénynek egy konfigurációs objektumot kell visszaadnia a Popper számára.

Adatattribútumok az egyes felugró ablakokhoz

Az egyes felugró ablakok beállításai az adatattribútumok használatával is megadhatók, a fentiek szerint.

A funkció használata apopperConfig

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

Mód

Aszinkron módszerek és átmenetek

Minden API metódus aszinkron , és átmenetet indít . Visszatérnek a hívóhoz, amint az átmenet elkezdődik, de még azelőtt, hogy az véget érne . Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívásait .

További információért tekintse meg JavaScript dokumentációnkat .

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 módszer, 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

Esemény típus Leírás
show.bs.popover Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
mutatott.bs.popover Ez az esemény akkor indul el, amikor a popover láthatóvá vált a felhasználó számára (megvárja, amíg a CSS-átmenetek befejeződnek).
elrejteni.bs.popover Ez az esemény azonnal elindul, amikor a hidepéldánymetódus meghívásra került.
rejtett.bs.popover Ez az esemény akkor indul el, amikor a popover elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését).
beszúrva.bs.popover Ez az esemény az show.bs.popoveresemény után indul el, amikor a popover sablont hozzáadták a DOM-hoz.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})