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
éscontent
az é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.
.disabled
A vagy elemek felbukkanását adisabled
burkoló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-nowrap
a<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.
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-toggle
Az 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 container
opció 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 focus
triggert 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 tabindex
attribú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 disabled
attribú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 hover
az 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-describedby
attribú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 allowList
engedé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"
.
sanitize
,
sanitizeFn
, és
allowList
opció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: |
content |
húr | elem | funkció | '' |
Alapértelmezett tartalomérték, ha Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a |
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ő: |
html |
logikai érték | false |
Szúrjon be HTML-t a felugró ablakba. Ha hamis, a innerText tulajdonsá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. 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 |
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 A popovert
A legkülső burkolóelemnek az |
title |
húr | elem | funkció | '' |
Az alapértelmezett címérték, ha Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a |
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. manual nem 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: 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: 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: . 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.popover
esemé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.popover
esemé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.popover
vagy hidden.bs.popover
esemé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 selector
beá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 show pé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 hide pé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.popover esemé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...
})