Popovers
Dokumentado kaj ekzemploj por aldoni Bootstrap popovers, kiel tiuj trovitaj en iOS, al iu ajn elemento en via retejo.
Superrigardo
Aferoj sciindaj kiam vi uzas la popover-kromaĵon:
- Popovers dependas de la tria-partia biblioteko Popper por poziciigado. Vi devas inkluzivi popper.min.js antaŭ bootstrap.js aŭ uzi
bootstrap.bundle.min.js
/bootstrap.bundle.js
kiu enhavas Popper por ke popovers funkciu! - Popovers postulas la konsileblan kromprogramon kiel dependecon.
- Popovers estas aligeblaj pro rendimentokialoj, do vi devas pravigi ilin mem .
- Nul-longo
title
kajcontent
valoroj neniam montros popover. - Specifu
container: 'body'
por eviti bildigajn problemojn en pli kompleksaj komponantoj (kiel niaj eniggrupoj, butongrupoj, ktp). - Deĉenigi popovers sur kaŝitaj elementoj ne funkcios.
- Popovers por
.disabled
aŭdisabled
elementoj devas esti ekigitaj sur envolvaĵelemento. - Kiam ekigitaj de ankroj kiuj volvas trans multoblaj linioj, popovers estos centritaj inter la totala larĝo de la ankroj. Uzu
.text-nowrap
sur via<a>
por eviti ĉi tiun konduton. - Popovers devas esti kaŝitaj antaŭ ol iliaj ekvivalentaj elementoj estis forigitaj de la DOM.
- Popovers povas esti ekigitaj danke al elemento ene de ombro DOM.
prefers-reduced-motion
amaskomunikila demando. Vidu la
sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .
Daŭre legu por vidi kiel popovers funkcias kun kelkaj ekzemploj.
Ekzemplo: Ebligu popovers ĉie
Unu maniero pravalorigi ĉiujn popovers sur paĝo estus elekti ilin laŭ ilia data-bs-toggle
atributo:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Ekzemplo: Uzante la container
opcion
Kiam vi havas iujn stilojn sur gepatra elemento, kiuj malhelpas popover, vi volas specifi kutimon container
por ke la HTML de la popover aperu ene de tiu elemento anstataŭe.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Ekzemplo
<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>
Kvar direktoj
Kvar opcioj estas disponeblaj: supro, dekstre, malsupre kaj maldekstre vicigitaj. Direktoj estas spegulitaj kiam vi uzas Bootstrap en RTL.
<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>
Forĵeti ĉe sekva klako
Uzu la focus
ellasilon por malakcepti popovers ĉe la sekva klako de la uzanto de malsama elemento ol la baskuliga elemento.
Specifa markado bezonata por malakcepti-on-sekva-klako
Por taŭga trans-retumilo kaj transplatforma konduto, vi devas uzi la <a>
etikedon, ne la <button>
etikedon, kaj vi ankaŭ devas inkluzivi tabindex
atributon.
<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'
})
Malebligitaj elementoj
Elementoj kun la disabled
atributo ne estas interagaj, tio signifas, ke uzantoj ne povas ŝvebi aŭ klaki ilin por ekigi popover (aŭ konsileto). Kiel solvo, vi volos ekigi la popover de envolvaĵo <div>
aŭ <span>
, ideale farita klavar-fokusebla per tabindex="0"
.
Por malfunkciigitaj popover-eksiloj, vi ankaŭ preferas data-bs-trigger="hover focus"
tiel ke la popover aperu kiel tuja vida sugesto al viaj uzantoj ĉar ili eble ne atendas klaki sur malfunkciigita elemento.
<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
Variabloj
$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);
Uzado
Ebligu popovers per JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Fari popovers funkcii por klavaro kaj helpteknologiaj uzantoj
Por permesi al klavaruzantoj aktivigi viajn popovers, vi devus nur aldoni ilin al HTML-elementoj kiuj estas tradicie klavar-fokuseblaj kaj interagaj (kiel ekzemple ligiloj aŭ formularaj kontroloj). Kvankam arbitraj HTML-elementoj (kiel <span>
s) povas esti enfokusigitaj aldonante la tabindex="0"
atributon, tio aldonos eble ĝenajn kaj konfuzajn tabuladojn sur ne-interagaj elementoj por klavaruzantoj, kaj la plej multaj helpaj teknologioj nuntempe ne anoncas la enhavon de la popover en ĉi tiu situacio. . Aldone, ne fidu nur hover
kiel la ellasilon por viaj popovers, ĉar ĉi tio ebligos ilin ekfunkciigi por klavaruzantoj.
Dum vi povas enmeti riĉan, strukturitan HTML-on en popovers kun la html
opcio, ni forte rekomendas ke vi evitu aldoni troan kvanton da enhavo. La maniero kiel popovers nuntempe funkcias estas ke, unufoje montrata, ilia enhavo estas ligita al la ellasila elemento kun la aria-describedby
atributo. Kiel rezulto, la tuteco de la enhavo de la popover estos anoncita al helpteknologiuzantoj kiel unu longa, seninterrompa fluo.
Aldone, kvankam eblas ankaŭ inkluzivi interagajn kontrolojn (kiel formularelementojn aŭ ligilojn) en via popover (aldonante ĉi tiujn elementojn al la allowList
permesitaj atributoj kaj etikedoj), konsciu, ke nuntempe la popover ne administras klavaran fokusordon. Kiam klavaruzanto malfermas popover, fokuso restas sur la ekiganta elemento, kaj ĉar la popover kutime ne tuj sekvas la ellasilon en la strukturo de la dokumento, ekzistas neniu garantio ke antaŭen/premado.TABmovos klavaran uzanton en la popover mem. Resume, simple aldoni interagajn kontrolojn al popover verŝajne igos ĉi tiujn kontrolojn neatingeblaj/neuzeblaj por klavaruzantoj kaj uzantoj de helpaj teknologioj, aŭ almenaŭ igos nelogikan ĝeneralan fokusan ordon. En ĉi tiuj kazoj, konsideru uzi modalan dialogon anstataŭe.
Opcioj
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-
, kiel en data-bs-animation=""
. Nepre ŝanĝu la kazon de la opcionomo de camelCase al kebab-case kiam vi transdonas la opciojn per datumaj atributoj. Ekzemple, anstataŭ uzi data-bs-customClass="beautifier"
, uzu data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, kaj
allowList
ne povas esti provizitaj per datumaj atributoj.
Nomo | Tajpu | Defaŭlte | Priskribo |
---|---|---|---|
animation |
bulea | true |
Apliku CSS-fade-transiron al la popover |
container |
ŝnuro | elemento | malvera | false |
Aldonas la popover al specifa elemento. Ekzemplo: |
content |
ŝnuro | elemento | funkcio | '' |
Defaŭlta enhavvaloro se Se funkcio estas donita, ĝi estos vokita kun ĝia |
delay |
nombro | objekto | 0 |
Prokrasto montri kaj kaŝi la popover (ms) - ne validas por mana ellasiltipo Se nombro estas provizita, prokrasto estas aplikata al ambaŭ kaŝi/montri Objekta strukturo estas: |
html |
bulea | false |
Enigu HTML en la popover. Se malvera, innerText posedaĵo estos uzata por enmeti enhavon en la DOM. Uzu tekston se vi zorgas pri XSS-atakoj. |
placement |
ŝnuro | funkcio | 'right' |
Kiel poziciigi la popover - aŭtomata | supro | fundo | maldekstra | ĝuste. Kiam funkcio estas uzata por determini la lokigon, ĝi estas vokita kun la popover DOM-nodo kiel sia unua argumento kaj la ekiga elemento DOM-nodo kiel sia dua. La |
selector |
ŝnuro | malvera | false |
Se elektilo estas disponigita, popover-objektoj estos delegitaj al la specifitaj celoj. En praktiko, ĉi tio estas uzata por ebligi dinamikan HTML-enhavon por aldoni popovers. Vidu ĉi tion kaj informan ekzemplon . |
template |
ŝnuro | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Baza HTML por uzi dum kreado de la popover. La popover-oj La popover-oj
La plej ekstera envolvaĵelemento devus havi la |
title |
ŝnuro | elemento | funkcio | '' |
Defaŭlta titolvaloro se Se funkcio estas donita, ĝi estos vokita kun ĝia |
trigger |
ŝnuro | 'click' |
Kiel popover estas ekigita - klaku | ŝvebi | fokuso | manlibro. Vi povas pasi plurajn ellasilon; apartigu ilin per spaco. manual ne povas esti kombinita kun iu ajn alia ellasilo. |
fallbackPlacements |
tabelo | ['top', 'right', 'bottom', 'left'] |
Difinu rezervlokigojn disponigante liston de allokigoj en tabelo (laŭ ordo de prefero). Por pliaj informoj referu al la kondutdokumentoj de Popper |
boundary |
ŝnuro | elemento | 'clippingParents' |
Superflua limlimo de la popover (validas nur por la preventOverflow modifilo de Popper). Defaŭlte ĝi estas 'clippingParents' kaj povas akcepti HTMLElement-referencon (nur per JavaScript). Por pliaj informoj, rigardu la dokumentojn de detectOverflow de Popper . |
customClass |
ŝnuro | funkcio | '' |
Aldonu klasojn al la popover kiam ĝi montriĝas. Notu, ke ĉi tiuj klasoj estos aldonitaj aldone al iuj klasoj specifitaj en la ŝablono. Por aldoni plurajn klasojn, apartigu ilin per spacoj: Vi ankaŭ povas pasi funkcion, kiu devus resendi ununuran ĉenon enhavantan kromajn klasnomojn. |
sanitize |
bulea | true |
Ebligu aŭ malŝalti la sanigon. Se aktivigita 'template' , 'content' kaj 'title' opcioj estos sanigitaj. Vidu la sekcion pri sanigilo en nia JavaScript-dokumentaro . |
allowList |
objekto | Defaŭlta valoro | Objekto kiu enhavas permesitajn atributojn kaj etikedojn |
sanitizeFn |
nulo | funkcio | null |
Ĉi tie vi povas provizi vian propran sanigan funkcion. Ĉi tio povas esti utila se vi preferas uzi dediĉitan bibliotekon por fari sanigon. |
offset |
tabelo | ŝnuro | funkcio | [0, 8] |
Ofseto de la popover relative al ĝia celo. Vi povas pasi ĉenon en datumaj atributoj kun komoj apartigitaj valoroj kiel: Kiam funkcio estas uzata por determini la ofseton, ĝi estas vokita kun objekto enhavanta la popper-lokigon, la referencon kaj popper-rektojn kiel sia unua argumento. La ekiga elemento DOM-nodo estas pasita kiel la dua argumento. La funkcio devas redoni tabelon kun du nombroj: . Por pliaj informoj raportu al la ofsetaj dokumentoj de Popper . |
popperConfig |
nulo | objekto | funkcio | null |
Por ŝanĝi la defaŭltan Popper-agordon de Bootstrap, vidu la agordon de Popper . Kiam funkcio estas uzata por krei la Popper-agordon, ĝi estas vokita kun objekto kiu enhavas la defaŭltan Popper-agordon de Bootstrap. Ĝi helpas vin uzi kaj kunfandi la defaŭltan kun via propra agordo. La funkcio devas resendi agordan objekton por Popper. |
Datumaj atributoj por individuaj popovers
Opcioj por individuaj popovers povas alternative esti precizigitaj per la uzo de datumaj atributoj, kiel klarigite supre.
Uzante funkcion kunpopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metodoj
Nesinkronaj metodoj kaj transiroj
Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .
montri
Rivelas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive montriĝis (te antaŭ ol la shown.bs.popover
evento okazas). Ĉi tio estas konsiderita "manlibro" ekigado de la popover. Popovers kies titolo kaj enhavo ambaŭ estas nullongaj neniam estas montrataj.
myPopover.show()
kaŝi
Kaŝas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis kaŝita (te antaŭ ol la hidden.bs.popover
evento okazas). Ĉi tio estas konsiderita "manlibro" ekigado de la popover.
myPopover.hide()
baskuli
Ŝaltas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.popover
evento hidden.bs.popover
okazas). Ĉi tio estas konsiderita "manlibro" ekigado de la popover.
myPopover.toggle()
disponi
Kaŝas kaj detruas la popover de elemento (Forigas konservitajn datumojn sur la DOM-elemento). Popovers kiuj uzas delegacion (kiuj estas kreitaj uzante la selector
opcion ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.
myPopover.dispose()
ebligi
Donas al la popover de elemento la kapablon esti montrita. Popovers estas ebligitaj defaŭlte.
myPopover.enable()
malŝalti
Forigas la kapablon por ke la popover de elemento estu montrita. La popover nur povos esti montrita se ĝi estas reebligita.
myPopover.disable()
baskuligi Ebligita
Ŝaltas la kapablon por ke la popover de elemento estu montrita aŭ kaŝita.
myPopover.toggleEnabled()
ĝisdatigo
Ĝisdatigas la pozicion de la popover de elemento.
myPopover.update()
getInstance
Senmova metodo, kiu ebligas al vi akiri la popover-instancon asociitan kun DOM-elemento
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Senmova metodo kiu ebligas al vi akiri la popover-instancon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Eventoj
Eventa tipo | Priskribo |
---|---|
show.bs.popover | Ĉi tiu evento tuj ekfunkciigas kiam la show ekzempla metodo estas vokita. |
montrata.bs.popover | Ĉi tiu evento estas lanĉita kiam la popover fariĝis videbla al la uzanto (atendos ke CSS-transiroj finiĝos). |
kaŝi.bs.popover | Ĉi tiu evento estas lanĉita tuj kiam la hide ekzempla metodo estas vokita. |
kaŝita.bs.popover | Ĉi tiu evento estas lanĉita kiam la popover finiĝis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos). |
enigita.bs.popover | Ĉi tiu evento estas lanĉita post la show.bs.popover evento kiam la popover ŝablono estis aldonita al la DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})