Popovers eziyitibwa Popovers
Ebiwandiiko n’ebyokulabirako eby’okugattako Bootstrap popovers, nga ezo ezisangibwa mu iOS, ku elementi yonna ku mukutu gwo.
Okulaba okutwalira awamu
Ebintu by’olina okumanya ng’okozesa popover plugin:
- Popovers beesigamye ku 3rd party library Popper okusobola okuteeka mu kifo. Olina okussaamu popper.min.js nga tonnaba bootstrap.js oba kozesa
bootstrap.bundle.min.js
/bootstrap.bundle.js
erimu Popper okusobola popovers okukola! - Popovers zeetaaga plugin ya tooltip nga okwesigamizibwa.
- Bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisa
util.js
. - Popovers are opt-in for performance reasons, kale olina okuzitandika ggwe kennyini .
- Zero-length
title
necontent
values tezijja kulaga popover. - Laga
container: 'body'
okwewala ebizibu by'okulaga mu bitundu ebizibu ennyo (nga ebibinja byaffe eby'okuyingiza, ebibinja bya button, n'ebirala). - Okusitula popovers ku elements ezikwekebwa tekijja kukola.
- Popovers for
.disabled
obadisabled
elements zirina okutandikibwa ku elementi y'okuzinga. - Bwe zisitulwa okuva ku nnanga ezizinga ku layini eziwera, popovers zijja kuba wakati wakati w’obugazi bw’ennanga okutwalira awamu. Kozesa
.text-nowrap
ku<a>
s yo okwewala enneeyisa eno. - Popovers zirina okukwekebwa nga elements zazo ezikwatagana tezinnaggyibwa mu DOM.
- Popovers zisobola okutandika okwebaza elementi munda mu shadow DOM.
prefers-reduced-motion
kubuuza kw'emikutu. Laba ekitundu
ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .
Sigala ng’osoma olabe engeri popovers gye zikolamu n’ebyokulabirako ebimu.
Okugeza: Ssobozesa popovers buli wamu
Engeri emu ey'okutandikawo popovers zonna ku lupapula yandibadde okuzilonda okusinziira ku data-toggle
attribute yazo:
$(function () {
$('[data-toggle="popover"]').popover()
})
Okugeza: Okukozesa container
eky’okulonda
Bw'oba n'emisono egimu ku elementi omuzadde ezitaataaganya popover, ojja kwagala okulaga custom container
HTML ya popover esobole okulabika munda mu elementi eyo mu kifo ky'ekyo.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Eky'okulabirako
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Endagiriro nnya
Enkola nnya ziriwo: waggulu, ku ddyo, wansi, ne kkono nga zikwatagana.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
Goba ku click okuddako
Kozesa focus
ekiziyiza okugoba popovers ku kunyiga kw'omukozesa okuddako ku elementi ey'enjawulo okusinga toggle element.
Markup eyenjawulo yeetaagibwa ku kugobwa-ku-ku-ku-ku-dako-okunyiga
Okusobola enneeyisa entuufu eya cross-browser ne cross-platform, olina okukozesa <a>
tag, so si tag <button>
, era era olina okussaamu tabindex
attribute.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
trigger: 'focus'
})
Ebintu ebilema
Elements ezirina disabled
attribute tezikwatagana, ekitegeeza nti abakozesa tebasobola hover oba okuzinyiga okutandika popover (oba tooltip). Nga workaround, ojja kwagala okutandika popover okuva mu wrapper <div>
oba <span>
era override the pointer-events
ku disabled element.
Ku biziyiza popover ebilema, oyinza data-trigger="hover"
n’okwagala popover esobole okulabika ng’okuddamu okw’amangu eri abakozesa bo nga bwe bayinza obutasuubira kunyiga ku kintu ekilema.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Enkozesa
Ssobozesa popovers nga oyita mu JavaScript:
$('#example').popover(options)
Okusannyalala kwa GPU
Popovers oluusi zirabika nga zifuuse blurry ku byuma bya Windows 10 olw’okusannyalala kwa GPU ne DPI y’enkola ekyusiddwa. Ekigonjoola kino mu v4 kwe kulemesa GPU acceleration nga bwe kyetaagisa ku popovers zo.
Okutereeza okuteeseddwa:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Okufuula popovers okukola eri abakozesa keyboard ne tekinologiya ayamba
Okukkiriza abakozesa keyboard okukola popovers zo, olina okuzigattako ku bintu bya HTML byokka ebitera okussa essira ku keyboard era ebikwatagana (nga links oba form controls). Newankubadde nga ebintu bya HTML ebitali bituufu (nga <span>
s) bisobola okufuulibwa ebiteekeddwako essira nga kwongerako tabindex="0"
ekintu, kino kijja kwongerako okuyimirira kwa tabu okuyinza okunyiiza era okutabula ku bintu ebitali bikwatagana eri abakozesa kiiboodi, era tekinologiya asinga okuyamba mu kiseera kino talangirira biri mu popover mu mbeera eno . Okugatta ku ekyo, teweesigama ku yokka hover
nga trigger for your popovers, kuba kino kijja kuzifuula ezitasobokera ddala trigger eri abakozesa keyboard.
Wadde nga osobola okuyingiza HTML omugagga, etegekeddwa mu popovers html
n’enkola, tukukubiriza nnyo okwewala okwongerako omuwendo ogusukkiridde ogw’ebirimu. Engeri popovers gye zikolamu mu kiseera kino eri nti, bwe zimala okulagibwa, ebirimu byazo bisibiddwa ku trigger element ne aria-describedby
attribute. N’ekyavaamu, byonna ebirimu mu popover bijja kulangirirwa eri abakozesa tekinologiya ayamba ng’omugga gumu omuwanvu, ogutasalako.
Okugatta ku ekyo, wadde nga kisoboka n’okussaamu ebifuga ebikwatagana (nga ebintu bya ffoomu oba enkolagana) mu popover yo (ng’ogattako ebintu bino ku whiteList
oba ebikkirizibwa ne tags), kimanye nti mu kiseera kino popover teddukanya nsengeka ya keyboard focus. Omukozesa wa keyboard bw’aggulawo popover, essira lisigala ku kintu ekivaako, era nga popover bwetera obutagoberera mangu trigger mu nsengeka y’ekiwandiiko, tewali bukakafu nti okugenda mu maaso/okunyigaTABejja kutambuza omukozesa wa keyboard mu popover yennyini. Mu bufunze, okumala okugattako ebifuga ebikwatagana ku popover kiyinza okufuula ebifuga bino obutatuukirirwa/obutakozesebwa eri abakozesa kiiboodi n’abakozesa tekinologiya ayamba, oba waakiri okukola ekiragiro ky’okussa essira okutwalira awamu ekitali kya nsonga. Mu mbeera zino, lowooza ku kukozesa emboozi ya modal mu kifo ky’ekyo.
Eby’okulondako
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-
, nga mu data-animation=""
.
sanitize
,
sanitizeFn
n'eby'okulonda
whiteList
tebisobola kuweebwa nga okozesa data attributes.
Erinnya | Okuwandiika | Okukosamu | Okunnyonnyola |
---|---|---|---|
okukola ebifaananyi ebirina obulamu | boolean | kituufu | Kozesa enkyukakyuka ya CSS fade ku popover |
ekintu ekirimu ebintu | olunyiriri | elementi | -kyaamu | -kyaamu | Agattako popover ku elementi eyeetongodde. Okugeza: |
okwesiima | olunyiriri | elementi | enkola | '' . | Omuwendo gw'ebirimu ogusookerwako singa Singa omulimu guweebwa, gujja kuyitibwa nga |
okulwawo | ennamba | ekintu | 0. | Okulwawo okulaga n'okukweka popover (ms) - tekikwata ku kika kya manual trigger Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga Ensengeka y’ekintu eri nti: |
html | boolean | -kyaamu | Teeka HTML mu popover. Bwe kiba kya bulimba, enkola ya jQuery text ejja kukozesebwa okuyingiza ebirimu mu DOM. Kozesa ebiwandiiko bw'oba weeraliikirira obulumbaganyi bwa XSS. |
okuteekebwa mu kifo | olunyiriri | enkola | 'kituufu' | Engeri y'okuteeka popover - auto | waggulu | wansi | ku kkono | kituufu. Omulimu bwe gukozesebwa okuzuula ekifo, guyitibwa nga popover DOM node nga ensonga yaayo esooka ate triggering element DOM node nga eyookubiri. Ensonga |
omusunsuzi | olunyiriri | -kyaamu | -kyaamu | Singa omusunsula aweebwa, ebintu bya popover bijja kuweebwa ebigendererwa ebiragiddwa. Mu nkola, kino kikozesebwa okusobozesa ebirimu bya HTML ebikyukakyuka okuba ne popovers ezigattibwako. Laba kino n'ekyokulabirako ekirimu amawulire . |
ekifaananyi ky’ebifaananyi | akaguwa | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML okukozesa nga okola popover. Popover's Popover's
Ekintu eky’okuzinga ekisinga ebweru kirina okuba ne |
omutwe | olunyiriri | elementi | enkola | '' . | Omuwendo gw'omutwe ogusookerwako singa Singa omulimu guweebwa, gujja kuyitibwa nga |
okusiikula | akaguwa | 'nyiga'. | Engeri popover gy'etandika - nyweza | hover | okussa essira | maniyo. Oyinza okuyisa ebizibu ebiwerako; zaawule n’ekifo. manual tesobola kugattibwa wamu na kiziyiza kirala kyonna. |
offset | ennamba | akaguwa | 0. | Offset ya popover okusinziira ku target yaayo. Okumanya ebisingawo laba Popper's offset docs . |
fallbackOkuteeka mu kifo | olunyiriri | ensengekera | 'okukyuusa' | Kiriza okulaga ekifo Popper ky'anaakozesa ku fallback. Okumanya ebisingawo laba Popper's behavior docs |
customClass | olunyiriri | enkola | '' . | Okwongerako classes ku popover nga eragiddwa. Weetegereze nti kiraasi zino zijja kwongerwako nga kwotadde ne kiraasi zonna eziragiddwa mu kifaananyi. Okwongerako kiraasi eziwera, zaawule n’ebifo: Osobola n'okuyisa omulimu ogulina okuzzaayo olunyiriri lumu olulimu amannya ga kiraasi ag'enjawulo. |
ensalo | olunyiriri | ekintu | 'omuzadde omuzingo'. | Overflow constraint ensalo ya popover. Ekkiriza emiwendo gya 'viewport' , 'window' , 'scrollParent' , oba ekijuliziddwa HTMLElement (JavaScript yokka). Okumanya ebisingawo laba Popper's preventOverflow docs . |
okuyonja | boolean | kituufu | Ssobozesa oba okulemesa okuyonja. If activated 'template' , 'content' era 'title' options zijja kulongoosebwa. Laba ekitundu kya sanitizer mu biwandiiko byaffe ebya JavaScript . |
Olukalala oluzungu | ekintu | Omuwendo ogusookerwako | Ekintu ekirimu ebifaananyi ebikkirizibwa ne tags |
okuyonjaFn | null | enkola | tekili mu mateeka | Wano osobola okugabira omulimu gwo ogw’okusiiga (sanitize function). Kino kiyinza okuba eky’omugaso singa oba oyagala okukozesa etterekero ly’ebitabo eryetongodde okukola sanitization. |
popperConfig nga bwe kiri | null | ekintu | tekili mu mateeka | Okukyusa ensengeka ya Popper eya Bootstrap eya bulijjo, laba ensengeka ya Popper |
Ebikwata ku data ku popovers ssekinnoomu
Enkola za popovers ssekinnoomu zisobola mu ngeri endala okulagibwa okuyita mu kukozesa data attributes, nga bwe kinnyonnyoddwa waggulu.
Enkola
Enkola ezitakwatagana n’enkyukakyuka
Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .
Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .
$().popover(options)
Etandikawo popovers olw'okukung'aanya elementi.
.popover('show')
Abikkula popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa ddala (kwe kugamba nga shown.bs.popover
ekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering of the popover. Popovers nga omutwe gwazo n’ebirimu byombi bya zero-length tebiragibwangako.
$('#element').popover('show')
.popover('hide')
Akweka popover ya elementi. Edda eri oyo akubira nga popover tennakwekebwa ddala (kwe kugamba nga hidden.bs.popover
ekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering of the popover.
$('#element').popover('hide')
.popover('toggle')
Ekyusakyusa popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.popover
oba hidden.bs.popover
ekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering of the popover.
$('#element').popover('toggle')
.popover('dispose')
Akweka era asaanyaawo popover ya elementi. Popovers ezikozesa delegation (ezitondebwa nga tukozesa option )selector
teziyinza kuzikirizibwa kinnoomu ku descendant trigger elements.
$('#element').popover('dispose')
.popover('enable')
Awa popover ya elementi obusobozi okulagibwa. Popovers zikozesebwa nga bwe kibadde.
$('#element').popover('enable')
.popover('disable')
Eggyawo obusobozi bwa elementi's popover okulagibwa. Popover ejja kusobola okulagibwa singa eddamu okusobozesa.
$('#element').popover('disable')
.popover('toggleEnabled')
Toggles obusobozi bwa element's popover okulagibwa oba okukwekebwa.
$('#element').popover('toggleEnabled')
.popover('update')
Ezza obuggya ekifo kya popover ya elementi.
$('#element').popover('update')
Ebibaddewo
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
show.bs.obwavu | Ekintu kino kikuba amangu ddala nga show enkola ya instance eyitiddwa. |
alagiddwa.bs.obwavu | Ekintu kino kigobwa nga popover ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). |
okukweka.bs.obwavu | Ekintu kino kikubwa amangu ddala nga hide enkola ya instance eyitiddwa. |
okukwekebwa.bs.obwavu | Ekintu kino kigobwa nga popover emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). |
eyingiziddwa.bs.obwavu | Omukolo guno gugobwa oluvannyuma show.bs.popover lw'omukolo nga popover template eyongezeddwa ku DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})