Popovers
Dokumentatsioon ja näited Bootstrapi hüpikaknate (nt iOS-is leiduvad) lisamiseks saidi mis tahes elemendile.
Ü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
title
jacontent
vää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
.disabled
võidisabled
elementide 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-nowrap
seda 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.
prefers-reduced-motion
meediumipäringust. Vaadake
meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .
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-toggle
atribuudi 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: container
valiku kasutamine
Kui teil on ülemelemendil mõned stiilid, mis segavad hüpikakna esilekutsumist, soovite määrata kohandatud container
elemendi, 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 focus
päästikut hüpikaknate tühistamiseks, kui kasutaja järgmisel klõpsul lülituselemendist erineval elemendil klõpsab.
Järgmisel klõpsamisel loobumiseks on vajalik konkreetne märgistus
Õigeks brauseri- ja platvormiüleseks käitumiseks peate kasutama märgendit <a>
, mitte<button>
märgendit, ja lisaks peate lisama tabindex
atribuudi.
<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 disabled
ei 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)
Hüpikakende kasutamine klaviatuuri ja abitehnoloogia kasutajatele
Et võimaldada klaviatuuri kasutajatel teie hüpikaknaid aktiveerida, peaksite need lisama ainult HTML-i elementidele, mis on tavapäraselt klaviatuurile keskenduvad ja interaktiivsed (nt lingid või vormi juhtelemendid). Kuigi suvalisi HTML-i elemente (nt <span>
s) saab tabindex="0"
atribuudi lisamisega fokusseeritavaks muuta, lisab see klaviatuurikasutajatele potentsiaalselt tüütuid ja segadusse ajavaid tabelduspunkte mitteinteraktiivsetele elementidele ning enamik abitehnoloogiaid ei teata sellises olukorras hüpikakna sisu. . Lisaks ärge lootke ainult hover
hüpikaknate käivitajale, kuna see muudab klaviatuurikasutajate jaoks nende käivitamise võimatuks.
Kuigi selle valikuga saate hüpikaknatesse lisada rikkalikku struktureeritud HTML-i, html
soovitame tungivalt vältida liigse sisu lisamist. Hüpikaknad praegu töötavad nii, et pärast kuvamist seotakse nende sisu aria-describedby
atribuudiga päästikelemendiga. Selle tulemusena teatatakse kogu popoveri sisu abitehnoloogia kasutajatele ühe pika katkematu voona.
Lisaks, kuigi hüpikaknasse on võimalik lisada ka interaktiivseid juhtelemente (nt vormielemente või linke) (lisates need elemendid allowList
lubatud atribuutide ja siltide hulka), pidage meeles, et praegu ei halda hüpikaken klaviatuuri fookuse järjekorda. Kui klaviatuurikasutaja avab hüpikakna, jääb fookus vallandavale elemendile ja kuna hüpikaken tavaliselt ei järgne kohe dokumendi struktuuris olevale päästikule, pole edasiliikumise/vajutamise garantiid.TABliigutab klaviatuuri kasutaja hüpikaknasse. Lühidalt, lihtsalt interaktiivsete juhtelementide lisamine hüpikaknasse muudab need juhtelemendid tõenäoliselt kättesaamatuks/kasutuskõlbmatuks klaviatuurikasutajatele ja abitehnoloogiate kasutajatele või teeb vähemalt ebaloogilise üldise fookusjärjestuse. Sellistel juhtudel kaaluge selle asemel modaalse dialoogi kasutamist.
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"
.
sanitize
,
sanitizeFn
ja
suvandeid.allowList
Nimi | Tüüp | Vaikimisi | Kirjeldus |
---|---|---|---|
animation |
tõeväärtus | true |
Rakendage hüpikaknale CSS-i tuhmumise üleminek |
container |
string | element | vale | false |
Lisab hüpikakna konkreetsele elemendile. Näide: |
content |
string | element | funktsiooni | '' |
Sisu vaikeväärtus, kui Kui funktsioon on antud, kutsutakse see välja nii, et selle |
delay |
number | objektiks | 0 |
Hüpikakna kuvamise ja peitmise viivitus (ms) – ei kehti käsitsi käivitamise tüübi puhul Kui number on esitatud, rakendatakse viivitust mõlemale peitmisele/näitamisele Objekti struktuur on järgmine: |
html |
tõeväärtus | false |
Sisestage hüpikaknasse HTML. Kui see on väär, innerText kasutatakse atribuuti sisu DOM-i sisestamiseks. Kui olete XSS-i rünnakute pärast mures, kasutage teksti. |
placement |
string | funktsiooni | 'right' |
Kuidas positsioneerida hüpikakna - auto | ülemine | alumine | vasakule | õige. Kui paigutuse määramiseks kasutatakse funktsiooni, kutsutakse seda esile hüpikakna DOM-sõlme esimese argumendiga ja käivitava elemendi DOM-sõlm teise argumendiga. Kontekst |
selector |
string | vale | false |
Kui valija on ette nähtud, delegeeritakse hüpikaknaobjektid määratud sihtmärkidele. Praktikas kasutatakse seda dünaamilise HTML-i sisu hüpikaknade lisamiseks. Vaadake seda ja informatiivset näidet . |
template |
string | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Põhi-HTML, mida kasutada hüpikakna loomisel. Popover'id Popover'id
Kõige välimisel ümbriselemendil peaks olema |
title |
string | element | funktsiooni | '' |
Pealkirja vaikeväärtus, kui Kui funktsioon on antud, kutsutakse see välja nii, et selle |
trigger |
string | 'click' |
Kuidas hüpikakna käivitatakse – klõpsake | hõljuda | keskenduda | manuaal. Võite läbida mitu päästikut; eraldage need tühikuga. manual ei saa kombineerida ühegi teise päästikuga. |
fallbackPlacements |
massiivi | ['top', 'right', 'bottom', 'left'] |
Määratlege varupaigutused, esitades massiivi paigutuste loendi (eelistuse järjekorras). Lisateabe saamiseks vaadake Popperi käitumisdokumente |
boundary |
string | element | 'clippingParents' |
Hüpikakna ülevoolupiirangu piir (kehtib ainult Popperi preventOverflow modifikaatorile). Vaikimisi on see 'clippingParents' ja võib aktsepteerida HTMLElementi viidet (ainult JavaScripti kaudu). Lisateavet leiate Popperi detectOverflow dokumentidest . |
customClass |
string | funktsiooni | '' |
Lisage hüpikaknasse klassid, kui see kuvatakse. Pange tähele, et need klassid lisatakse lisaks mallis määratud klassidele. Mitme klassi lisamiseks eraldage need tühikutega: Saate edastada ka funktsiooni, mis peaks tagastama ühe stringi, mis sisaldab täiendavaid klassinimesid. |
sanitize |
tõeväärtus | true |
Lubage või keelake desinfitseerimine. Kui see on aktiveeritud 'template' , desinfitseeritakse valikud 'content' . 'title' Vaadake meie JavaScripti dokumentatsiooni desinfitseerimisvahendi jaotist . |
allowList |
objektiks | Vaikeväärtus | Objekt, mis sisaldab lubatud atribuute ja silte |
sanitizeFn |
null | funktsiooni | null |
Siin saate pakkuda oma desinfitseerimisfunktsiooni. See võib olla kasulik, kui eelistate desinfitseerimiseks kasutada spetsiaalset raamatukogu. |
offset |
massiiv | string | funktsiooni | [0, 8] |
Popoveri nihe selle sihtmärgi suhtes. Andmeatribuutides saate stringi edastada komadega eraldatud väärtustega, näiteks: Kui funktsiooni kasutatakse nihke määramiseks, kutsutakse seda esile objektiga, mis sisaldab esimese argumendina popperi paigutust, viidet ja popper rects. Käivitav element DOM-sõlm edastatakse teise argumendina. Funktsioon peab tagastama kahe numbriga massiivi: . Lisateabe saamiseks vaadake Popperi nihkedokumente . |
popperConfig |
null | objekt | funktsiooni | null |
Bootstrapi Popperi vaikekonfiguratsiooni muutmiseks vaadake jaotist Popperi konfiguratsioon . Kui Popperi konfiguratsiooni loomiseks kasutatakse funktsiooni, kutsutakse see välja objektiga, mis sisaldab Bootstrapi Popperi vaikekonfiguratsiooni. See aitab teil kasutada ja liita vaikeseadeid teie enda konfiguratsiooniga. Funktsioon peab Popperi jaoks tagastama konfiguratsiooniobjekti. |
Andmete atribuudid üksikute hüpikaknate jaoks
Üksikute hüpikaknate valikuid saab alternatiivselt määrata andmeatribuutide abil, nagu eespool selgitatud.
Funktsiooni kasutamine koospopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
meetodid
Asünkroonsed meetodid ja üleminekud
Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .
Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .
näidata
Näitab elemendi hüpikakna. Naaseb helistaja juurde enne hüpikakna tegelikku näitamist (st enne shown.bs.popover
sü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.popover
sü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.popover
või hidden.bs.popover
toimumist). 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
Sündmuse tüüp | Kirjeldus |
---|---|
show.bs.popover | See sündmus käivitub kohe, kui show eksemplari meetod kutsutakse. |
näidatud.bs.popover | See sündmus käivitatakse, kui hüpikaken on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut). |
peida.bs.popover | See sündmus käivitatakse kohe, kui hide eksemplari meetod on välja kutsutud. |
peidetud.bs.popover | See sündmus käivitatakse, kui hüpikakna kasutaja eest peitmine on lõppenud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
sisestatud.bs.popover | See sündmus käivitatakse pärast show.bs.popover sündmust, kui hüpikakende mall on DOM-i lisatud. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})