Mga Popover
Dokumentasyon ug mga pananglitan sa pagdugang sa Bootstrap popovers, sama sa makita sa iOS, sa bisan unsang elemento sa imong site.
Overview
Mga butang nga mahibal-an kung gamiton ang popover plugin:
- Ang mga Popover nagsalig sa 3rd party nga librarya nga Popper para sa pagpoposisyon. Kinahanglan nimong iapil ang popper.min.js sa wala pa ang bootstrap.js o gamita ang
bootstrap.bundle.min.js
/bootstrap.bundle.js
nga adunay sulud nga Popper aron molihok ang mga popover! - Ang mga Popover nanginahanglan sa tooltip plugin isip dependency.
- Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kini
util.js
. - Ang mga Popover kay nag-opt-in tungod sa mga rason sa performance, mao nga ikaw mismo ang mag-initialize niini .
- Ang zero-length
title
ugcontent
mga kantidad dili gyud magpakita ug popover. - Tinoa
container: 'body'
aron malikayan ang mga problema sa paghubad sa mas komplikado nga mga sangkap (sama sa among mga grupo sa input, mga grupo sa butones, ug uban pa). - Ang pag-trigger sa mga popover sa tinago nga mga elemento dili molihok.
- Ang mga popover para sa
.disabled
odisabled
mga elemento kinahanglang ma-trigger sa usa ka elemento sa wrapper. - Kung na-trigger gikan sa mga angkla nga nagputos sa daghang mga linya, ang mga popover masentro taliwala sa kinatibuk-ang gilapdon sa mga angkla. Gamita
.text-nowrap
sa imong<a>
s aron malikayan kini nga kinaiya. - Kinahanglang itago ang mga popover sa dili pa makuha ang mga katugbang nga elemento niini gikan sa DOM.
- Ang mga popover mahimong ma-trigger salamat sa usa ka elemento sa sulod sa anino nga DOM.
prefers-reduced-motion
pangutana sa media. Tan-awa ang
gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .
Padayon sa pagbasa aron makita kung giunsa paglihok ang mga popover uban ang pipila ka mga pananglitan.
Pananglitan: I-enable ang mga popovers bisan asa
Usa ka paagi sa pagsugod sa tanan nga mga popovers sa usa ka panid mao ang pagpili kanila pinaagi sa ilang mga data-toggle
hiyas:
$(function () {
$('[data-toggle="popover"]').popover()
})
Pananglitan: Gamit ang container
opsyon
Kung ikaw adunay pipila ka mga estilo sa usa ka ginikanan nga elemento nga makabalda sa usa ka popover, gusto nimong itakda ang usa ka kostumbre container
aron ang HTML sa popover makita sa sulod sa elemento.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Pananglitan
<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>
Upat ka direksyon
Upat ka mga kapilian ang magamit: taas, tuo, ubos, ug wala nga linya.
<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>
Isalikway sa sunod nga pag-klik
Gamita ang focus
gatilyo aron isalikway ang mga popover sa sunod nga pag-klik sa user sa laing elemento kay sa toggle nga elemento.
Piho nga markup gikinahanglan para sa dismiss-on-next-click
Alang sa husto nga cross-browser ug cross-platform nga pamatasan, kinahanglan nimo gamiton ang <a>
tag, dili ang <button>
tag, ug kinahanglan usab nimo nga ilakip ang usa ka tabindex
hiyas.
<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'
})
Mga disabled nga elemento
Ang mga elemento nga adunay disabled
attribute dili interactive, nagpasabot nga ang mga user dili maka-hover o maka-click niini aron ma-trigger ang popover (o tooltip). Isip usa ka workaround, gusto nimong i-trigger ang popover gikan sa usa ka wrapper <div>
o <span>
ug i-override ang pointer-events
on the disabled nga elemento.
Para sa disabled nga popover triggers, mahimo usab nimo nga gusto data-trigger="hover"
nga ang popover makita ingon nga diha-diha nga biswal nga feedback sa imong mga tiggamit tungod kay sila dili magdahom nga mag- klik sa usa ka disabled nga elemento.
<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>
Paggamit
I-enable ang mga popovers pinaagi sa JavaScript:
$('#example').popover(options)
Ang pagpadali sa GPU
Ang mga popover usahay makita nga hanap Windows 10 mga aparato tungod sa pagpadali sa GPU ug usa ka giusab nga sistema sa DPI. Ang workaround alang niini sa v4 mao ang pag-disable sa GPU acceleration kung gikinahanglan sa imong mga popovers.
Gisugyot nga ayuhon:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Ang paghimo sa mga popover nga magamit alang sa mga tiggamit sa keyboard ug assistive nga teknolohiya
Aron tugotan ang mga tiggamit sa keyboard nga ma-aktibo ang imong mga popover, kinahanglan nimo nga idugang lamang kini sa mga elemento sa HTML nga tradisyonal nga gipunting sa keyboard ug interactive (sama sa mga link o mga kontrol sa porma). Bisan tuod ang arbitraryong mga elemento sa HTML (sama sa <span>
s) mahimong mapunting pinaagi sa pagdugang sa tabindex="0"
hiyas, kini makadugang sa posibleng makahasol ug makalibog nga mga paghunong sa tab sa dili interactive nga mga elemento alang sa mga tiggamit sa keyboard, ug kadaghanan sa mga teknolohiya sa pagtabang sa pagkakaron wala magpahibalo sa sulod sa popover niini nga sitwasyon. . Dugang pa, ayaw pagsalig lamang sa hover
ingon nga gatilyo sa imong mga popovers, tungod kay kini maghimo kanila nga imposible nga ma-trigger alang sa mga tiggamit sa keyboard.
Samtang mahimo nimong i-insert ang adunahan, structured nga HTML sa mga popovers nga adunay html
opsyon, kusganon namong girekomenda nga likayan nimo ang pagdugang og sobra nga gidaghanon sa sulod. Ang paagi nga naglihok karon ang mga popovers mao nga, sa higayon nga gipakita, ang ilang sulud nahigot sa elemento sa pag-trigger nga adunay aria-describedby
hiyas. Ingon usa ka sangputanan, ang tibuuk nga sulud sa popover ipahibalo sa mga tiggamit sa teknolohiya nga makatabang ingon usa ka taas, walay hunong nga sapa.
Dugang pa, samtang posible usab nga ilakip ang mga interactive nga kontrol (sama sa mga elemento sa porma o mga link) sa imong popover (pinaagi sa pagdugang niini nga mga elemento sa whiteList
o gitugotan nga mga hiyas ug mga tag), hibaloi nga sa pagkakaron ang popover wala magdumala sa han-ay sa focus sa keyboard. Sa diha nga ang usa ka tiggamit sa keyboard mag-abli sa usa ka popover, ang focus magpabilin sa triggering nga elemento, ug ingon nga ang popover kasagaran dili diha-diha dayon mosunod sa gatilyo sa dokumento sa istruktura, walay garantiya nga ang paglihok sa unahan/pagpindot.TABmobalhin sa usa ka tiggamit sa keyboard ngadto sa popover mismo. Sa laktod nga pagkasulti, ang pagdugang lamang sa mga interactive nga kontrol sa usa ka popover lagmit nga maghimo niini nga mga kontrol nga dili maabot/dili magamit alang sa mga tiggamit sa keyboard ug mga tiggamit sa mga teknolohiya sa pagtabang, o sa labing gamay nga paghimo alang sa usa ka dili makatarunganon nga kinatibuk-ang focus order. Sa kini nga mga kaso, ikonsiderar ang paggamit sa modal dialog sa baylo.
Mga kapilian
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-animation=""
.
sanitize
,
sanitizeFn
ug
whiteList
mga kapilian dili mahatag gamit ang mga hiyas sa datos.
Ngalan | Matang | Default | Deskripsyon |
---|---|---|---|
animation | boolean | tinuod | Ibutang ang CSS fade transition sa popover |
sudlanan | hilo | elemento | bakak | bakak | Gidugang ang popover sa usa ka piho nga elemento. Pananglitan: |
sulod | hilo | elemento | function | '' | Default nga kantidad sa sulod kung wala ang Kung ang usa ka function gihatag, kini tawgon uban ang |
paglangan | numero | butang | 0 | Paglangan sa pagpakita ug pagtago sa popover (ms) - dili magamit sa manual trigger type Kung adunay gihatag nga numero, ang paglangan magamit sa parehas nga pagtago/pagpakita Ang istruktura sa butang mao ang: |
html | boolean | bakak | Isulod ang HTML sa popover. Kung bakak, ang pamaagi sa jQuery text gamiton sa pagsal-ot sa sulud sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS. |
pagbutang | hilo | function | 'tama' | Giunsa pagpahimutang ang popover - awto | ibabaw | ubos | wala | husto. Kung gigamit ang usa ka function aron mahibal-an ang pagbutang, gitawag kini nga ang popover DOM node ingon ang una nga argumento ug ang hinungdan nga elemento nga DOM node ingon ikaduha. Ang |
tigpili | hilo | bakak | bakak | Kung gihatag ang usa ka tigpili, ang mga butang nga popover itugyan sa gitakda nga mga target. Sa praktis, kini gigamit aron makahimo sa dinamikong HTML nga sulod nga adunay mga popovers nga idugang. Tan-awa kini ug usa ka pananglitan nga impormatibo . |
template | hilo | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML nga gamiton sa paghimo sa popover. Ang popover's Ang popover's
Ang labing gawas nga elemento sa wrapper kinahanglan adunay |
titulo | hilo | elemento | function | '' | Default nga bili sa titulo kung wala ang Kung ang usa ka function gihatag, kini tawgon uban ang |
trigger | hilo | 'pag-klik' | Giunsa ang pag-trigger sa popover - pag-klik | hover | focus | manwal. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. manual dili mahimong ikombinar sa bisan unsa nga lain nga trigger. |
offset | numero | hilo | 0 | Offset sa popover kalabot sa target niini. Alang sa dugang nga impormasyon tan-awa ang Popper's offset docs . |
fallbackPlacement | hilo | han-ay | 'flip' | Tugoti nga ipiho kung unsang posisyon ang gamiton ni Popper sa fallback. Alang sa dugang nga impormasyon tan-awa ang Popper's behavior docs |
customClass | hilo | function | '' | Idugang ang mga klase sa popover kung kini gipakita. Timan-i nga kini nga mga klase idugang dugang sa bisan unsang klase nga gitakda sa template. Para makadugang ug daghang klase, ibulag sila sa mga espasyo: Mahimo usab nimo nga ipasa ang usa ka function nga kinahanglan ibalik ang usa ka string nga adunay dugang nga mga ngalan sa klase. |
utlanan | hilo | elemento | 'scrollParent' | Pag-awas sa pagpugong sa utlanan sa popover. Gidawat ang mga kantidad sa 'viewport' , 'window' , 'scrollParent' , o usa ka HTMLElement reference (JavaScript lang). Alang sa dugang nga impormasyon tan-awa ang Popper's preventOverflow docs . |
sanitize | boolean | tinuod | I-enable o i-disable ang sanitization. Kung gi-aktibo 'template' , 'content' ug 'title' ang mga kapilian ma-sanitize. Tan-awa ang seksyon sa sanitizer sa among dokumentasyon sa JavaScript . |
whitelist | butang | Default nga bili | Ang butang nga adunay gitugotan nga mga hiyas ug mga tag |
sanitizeFn | null | function | null | Dinhi mahimo nimong ihatag ang imong kaugalingon nga sanitize function. Mahimong mapuslanon kini kung gusto nimo nga mogamit usa ka gipahinungod nga librarya aron mahimo ang sanitization. |
popperConfig | null | butang | null | Aron usbon ang default Popper config sa Bootstrap, tan-awa ang configuration sa Popper |
Mga hiyas sa datos alang sa indibidwal nga mga popovers
Ang mga kapilian alang sa indibidwal nga mga popover mahimong ipiho pinaagi sa paggamit sa mga hiyas sa datos, ingon sa gipatin-aw sa ibabaw.
Pamaagi
Asynchronous nga mga pamaagi ug transisyon
Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .
Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .
$().popover(options)
Nagsugod sa mga popover para sa koleksyon sa elemento.
.popover('show')
Nagpadayag sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang popover (ie sa wala pa shown.bs.popover
mahitabo ang panghitabo). Giisip kini nga usa ka "manwal" nga pag-trigger sa popover. Ang mga Popover kansang titulo ug sulod parehas nga zero-gitas-on dili gyud ipakita.
$('#element').popover('show')
.popover('hide')
Nagtago sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover tinuod nga gitago (ie sa wala pa hidden.bs.popover
mahitabo ang panghitabo). Giisip kini nga usa ka "manwal" nga pag-trigger sa popover.
$('#element').popover('hide')
.popover('toggle')
I-toggle ang popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.popover
o hidden.bs.popover
panghitabo). Giisip kini nga usa ka "manwal" nga pag-trigger sa popover.
$('#element').popover('toggle')
.popover('dispose')
Nagtago ug nagguba sa popover sa usa ka elemento. Ang mga popover nga naggamit sa delegasyon (nga gihimo gamit ang selector
opsyon ) dili mahimong tagsa-tagsa nga gub-on sa mga elemento sa descendant trigger.
$('#element').popover('dispose')
.popover('enable')
Naghatag sa popover sa elemento sa abilidad nga ipakita. Ang mga popover gipalihok pinaagi sa default.
$('#element').popover('enable')
.popover('disable')
Gikuha ang abilidad nga ipakita ang popover sa usa ka elemento. Mapakita lang ang popover kung kini ma-enable pag-usab.
$('#element').popover('disable')
.popover('toggleEnabled')
I-toggle ang abilidad para sa usa ka elemento nga popover nga ipakita o itago.
$('#element').popover('toggleEnabled')
.popover('update')
Gi-update ang posisyon sa popover sa usa ka elemento.
$('#element').popover('update')
Mga panghitabo
Uri sa Hitabo | Deskripsyon |
---|---|
show.bs.popover | Kini nga panghitabo nagdilaab dayon kung ang show pamaagi sa pananglitan gitawag. |
gipakita.bs.popover | Kini nga panghitabo gipabuto kung ang popover nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). |
hide.bs.popover | Kini nga panghitabo gipabuto dayon kung ang hide pamaagi sa pananglitan gitawag na. |
tago.bs.popover | Kini nga panghitabo gipabuto kung ang popover nahuman na nga gitago gikan sa tiggamit (maghulat alang sa mga transisyon sa CSS nga makompleto). |
gisulod.bs.popover | Kini nga panghitabo gipabuto pagkahuman sa show.bs.popover panghitabo kung ang template sa popover gidugang sa DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})