Mga Popover
Dokumentasyon at mga halimbawa para sa pagdaragdag ng Bootstrap popovers, tulad ng mga matatagpuan sa iOS, sa anumang elemento sa iyong site.
Pangkalahatang-ideya
Mga bagay na dapat malaman kapag ginagamit ang popover plugin:
- Umaasa ang mga Popover sa 3rd party na library na Popper para sa pagpoposisyon. Dapat mong isama ang popper.min.js bago ang bootstrap.js o gamitin ang
bootstrap.bundle.min.js
/bootstrap.bundle.js
na naglalaman ng Popper upang gumana ang mga popover! - Kinakailangan ng mga Popover ang tooltip plugin bilang dependency.
- Kung binubuo mo ang aming JavaScript mula sa pinagmulan, nangangailangan
util.js
ito ng . - Ang mga popover ay nag-opt-in para sa mga dahilan ng pagganap, kaya dapat mong simulan ang mga ito sa iyong sarili .
- Hindi kailanman magpapakita ng popover ang zero-length
title
at mga value.content
- Tukuyin
container: 'body'
upang maiwasan ang pag-render ng mga problema sa mas kumplikadong mga bahagi (tulad ng aming mga pangkat ng input, mga pangkat ng button, atbp). - Ang pag-trigger ng mga popover sa mga nakatagong elemento ay hindi gagana.
- Dapat na ma-trigger ang mga popover para sa
.disabled
o mgadisabled
elemento sa isang elemento ng wrapper. - Kapag na-trigger mula sa mga anchor na bumabalot sa maraming linya, ang mga popover ay igitna sa pagitan ng kabuuang lapad ng mga anchor. Gamitin
.text-nowrap
sa iyong<a>
s upang maiwasan ang pag-uugaling ito. - Dapat na itago ang mga popover bago maalis ang mga kaukulang elemento nito sa DOM.
- Maaaring ma-trigger ang mga popover salamat sa isang elemento sa loob ng shadow DOM.
prefers-reduced-motion
query ng media. Tingnan ang
seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .
Panatilihin ang pagbabasa upang makita kung paano gumagana ang mga popover kasama ang ilang mga halimbawa.
Halimbawa: Paganahin ang mga popover sa lahat ng dako
Ang isang paraan upang simulan ang lahat ng mga popover sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-toggle
katangian:
$(function () {
$('[data-toggle="popover"]').popover()
})
Halimbawa: Gamit ang container
opsyon
Kapag mayroon kang ilang mga istilo sa isang parent na elemento na nakakasagabal sa isang popover, gugustuhin mong tumukoy ng custom container
upang ang HTML ng popover ay lumabas na lang sa loob ng elementong iyon.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Halimbawa
<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>
Apat na direksyon
Apat na opsyon ang available: naka-align sa itaas, kanan, ibaba, at kaliwa.
<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>
I-dismiss sa susunod na pag-click
Gamitin ang focus
trigger upang i-dismiss ang mga popover sa susunod na pag-click ng user sa ibang elemento kaysa sa toggle na elemento.
Kinakailangan ang partikular na markup para sa dismiss-on-next-click
Para sa wastong cross-browser at cross-platform na pag-uugali, dapat mong gamitin ang <a>
tag, hindi ang <button>
tag, at dapat ka ring magsama ng 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'
})
Mga elementong may kapansanan
Ang mga elementong may disabled
attribute ay hindi interactive, ibig sabihin, hindi maaaring i-hover o i-click ng mga user ang mga ito upang mag-trigger ng popover (o tooltip). Bilang isang solusyon, gugustuhin mong i-trigger ang popover mula sa isang wrapper <div>
o <span>
at i-override ang pointer-events
nasa naka-disable na elemento.
Para sa mga na-disable na pag-trigger ng popover, maaari mo ring mas gusto data-trigger="hover"
na ang popover ay lumitaw bilang agarang visual na feedback sa iyong mga user dahil maaaring hindi nila inaasahan na mag- click sa isang hindi pinaganang 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
Paganahin ang mga popover sa pamamagitan ng JavaScript:
$('#example').popover(options)
Pagpapabilis ng GPU
Kung minsan ay lumalabas na malabo ang mga popover sa mga Windows 10 device dahil sa GPU acceleration at isang binagong DPI ng system. Ang solusyon para dito sa v4 ay i-disable ang GPU acceleration kung kinakailangan sa iyong mga popover.
Iminungkahing pag-aayos:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Ang paggawa ng mga popover ay gumagana para sa mga gumagamit ng keyboard at pantulong na teknolohiya
Upang payagan ang mga user ng keyboard na i-activate ang iyong mga popover, dapat mo lang silang idagdag sa mga elemento ng HTML na tradisyonal na nakatutok sa keyboard at interactive (tulad ng mga link o mga kontrol sa form). Bagama't ang mga di-makatwirang elemento ng HTML (tulad ng <span>
s) ay maaaring gawing focusable sa pamamagitan ng pagdaragdag ng tabindex="0"
attribute, magdaragdag ito ng potensyal na nakakainis at nakakalito na mga tab stop sa mga hindi interactive na elemento para sa mga user ng keyboard, at karamihan sa mga pantulong na teknolohiya ay kasalukuyang hindi nag-aanunsyo ng nilalaman ng popover sa sitwasyong ito. . Bukod pa rito, huwag umasa lamang hover
bilang trigger para sa iyong mga popover, dahil gagawin nitong imposibleng ma-trigger ang mga ito para sa mga user ng keyboard.
Bagama't maaari kang magpasok ng mayaman, structured na HTML sa mga popover na may html
opsyon, lubos naming inirerekomenda na iwasan mo ang pagdaragdag ng labis na dami ng nilalaman. Ang paraan ng kasalukuyang paggana ng mga popover ay, kapag naipakita na, ang kanilang nilalaman ay nakatali sa elemento ng pag-trigger na may aria-describedby
katangian. Bilang resulta, ang kabuuan ng nilalaman ng popover ay iaanunsyo sa mga gumagamit ng pantulong na teknolohiya bilang isang mahaba, walang patid na stream.
Bukod pa rito, habang posible ring isama ang mga interactive na kontrol (gaya ng mga elemento ng form o link) sa iyong popover (sa pamamagitan ng pagdaragdag ng mga elementong ito sa whiteList
o pinapayagang mga attribute at tag), tandaan na sa kasalukuyan ang popover ay hindi namamahala sa pagkakasunud-sunod ng focus sa keyboard. Kapag ang isang gumagamit ng keyboard ay nagbukas ng isang popover, ang focus ay nananatili sa nagti-trigger na elemento, at dahil ang popover ay karaniwang hindi kaagad sumusunod sa trigger sa istraktura ng dokumento, walang garantiya na ang paglipat ng pasulong/pagpindotTABililipat ang isang gumagamit ng keyboard sa mismong popover. Sa madaling salita, ang pagdaragdag lamang ng mga interactive na kontrol sa isang popover ay malamang na gawing hindi maabot/hindi magagamit ang mga kontrol na ito para sa mga gumagamit ng keyboard at mga gumagamit ng mga pantulong na teknolohiya, o sa pinakakaunti ay gumawa para sa isang hindi makatwirang pangkalahatang pagkakasunud-sunod ng focus. Sa mga kasong ito, isaalang-alang ang paggamit ng modal dialog sa halip.
Mga pagpipilian
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-
, tulad ng sa data-animation=""
.
sanitize
,
sanitizeFn
at
mga whiteList
opsyon ay hindi maibibigay gamit ang mga katangian ng data.
Pangalan | Uri | Default | Paglalarawan |
---|---|---|---|
animation | boolean | totoo | Maglapat ng CSS fade transition sa popover |
lalagyan | string | elemento | mali | mali | Idinaragdag ang popover sa isang partikular na elemento. Halimbawa: |
nilalaman | string | elemento | function | '' | Default na halaga ng nilalaman kung Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang |
pagkaantala | numero | bagay | 0 | Pagkaantala sa pagpapakita at pagtatago ng popover (ms) - hindi nalalapat sa manu-manong uri ng pag-trigger Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita Ang istraktura ng bagay ay: |
html | boolean | mali | Ipasok ang HTML sa popover. Kung mali, ang text pamamaraan ng jQuery ay gagamitin upang magpasok ng nilalaman sa DOM. Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS. |
pagkakalagay | string | function | 'tama' | Paano iposisyon ang popover - auto | tuktok | ibaba | kaliwa | tama. Kapag ginamit ang isang function upang matukoy ang placement, tinatawag itong popover DOM node bilang unang argumento nito at ang triggering element na DOM node bilang pangalawa nito. Ang |
tagapili | string | mali | mali | Kung may ibibigay na selector, ang mga popover object ay idelegado sa mga tinukoy na target. Sa pagsasagawa, ito ay ginagamit upang paganahin ang dynamic na HTML na nilalaman na magkaroon ng mga popover na idinagdag. Tingnan ito at isang halimbawang nagbibigay-kaalaman . |
template | string | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML na gagamitin kapag gumagawa ng popover. Ang popover's Ang popover's
Ang pinakamalawak na elemento ng wrapper ay dapat magkaroon ng |
pamagat | string | elemento | function | '' | Default na halaga ng pamagat kung Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang |
gatilyo | string | 'click' | Paano na-trigger ang popover - i-click ang | mag-hover | focus | manwal. Maaari kang magpasa ng maraming trigger; paghiwalayin sila ng isang puwang. manual hindi maaaring isama sa anumang iba pang trigger. |
offset | numero | string | 0 | Offset ng popover na nauugnay sa target nito. Para sa higit pang impormasyon sumangguni sa mga offset na doc ng Popper . |
fallbackPlacement | string | array | 'flip' | Payagan na tukuyin kung aling posisyon ang gagamitin ng Popper sa fallback. Para sa higit pang impormasyon sumangguni sa mga doc ng pag-uugali ng Popper |
customClass | string | function | '' | Magdagdag ng mga klase sa popover kapag ipinakita ito. Tandaan na ang mga klase na ito ay idaragdag bilang karagdagan sa anumang mga klase na tinukoy sa template. Upang magdagdag ng maraming klase, paghiwalayin ang mga ito ng mga puwang: Maaari ka ring magpasa ng function na dapat magbalik ng isang string na naglalaman ng mga karagdagang pangalan ng klase. |
hangganan | string | elemento | 'scrollParent' | Overflow constraint na hangganan ng popover. Tumatanggap ng mga value ng 'viewport' , 'window' , 'scrollParent' , o isang HTMLElement reference (JavaScript lang). Para sa higit pang impormasyon sumangguni sa preventOverflow docs ng Popper . |
sanitize | boolean | totoo | Paganahin o huwag paganahin ang sanitization. Kung na-activate 'template' , 'content' at 'title' ang mga opsyon ay ma-sanitize. Tingnan ang seksyon ng sanitizer sa aming dokumentasyon ng JavaScript . |
whiteList | bagay | Default na halaga | Bagay na naglalaman ng mga pinapayagang katangian at tag |
sanitizeFn | null | function | wala | Dito maaari kang magbigay ng iyong sariling sanitize function. Maaari itong maging kapaki-pakinabang kung mas gusto mong gumamit ng nakalaang library para magsagawa ng sanitization. |
popperConfig | null | bagay | wala | Upang baguhin ang default na Popper config ng Bootstrap, tingnan ang configuration ng Popper |
Mga katangian ng data para sa mga indibidwal na popover
Ang mga opsyon para sa mga indibidwal na popover ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data, gaya ng ipinaliwanag sa itaas.
Paraan
Mga asynchronous na pamamaraan at paglipat
Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .
Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .
$().popover(options)
Sinisimulan ang mga popover para sa isang koleksyon ng elemento.
.popover('show')
Nagpapakita ng popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang popover (ibig sabihin, bago shown.bs.popover
mangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover. Ang mga popover na ang pamagat at nilalaman ay parehong zero-length ay hindi kailanman ipinapakita.
$('#element').popover('show')
.popover('hide')
Itinatago ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naitago ang popover (ibig sabihin, bago hidden.bs.popover
mangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.
$('#element').popover('hide')
.popover('toggle')
I-toggle ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita o naitago ang popover (ibig sabihin, bago mangyari ang shown.bs.popover
o hidden.bs.popover
kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.
$('#element').popover('toggle')
.popover('dispose')
Itinatago at sinisira ang popover ng isang elemento. Ang mga popover na gumagamit ng delegasyon (na ginawa gamit ang selector
opsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.
$('#element').popover('dispose')
.popover('enable')
Nagbibigay ng kakayahang maipakita ang popover ng isang elemento. Ang mga popover ay pinagana bilang default.
$('#element').popover('enable')
.popover('disable')
Tinatanggal ang kakayahang maipakita ang popover ng isang elemento. Maipapakita lang ang popover kung ito ay muling pinagana.
$('#element').popover('disable')
.popover('toggleEnabled')
I-toggle ang kakayahang ipakita o itago ang popover ng isang elemento.
$('#element').popover('toggleEnabled')
.popover('update')
Ina-update ang posisyon ng popover ng isang elemento.
$('#element').popover('update')
Mga kaganapan
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.popover | Agad na gagana ang kaganapang ito kapag show tinawag ang paraan ng instance. |
ipinapakita.bs.popover | Ang kaganapang ito ay pinapagana kapag ang popover ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). |
hide.bs.popover | Agad na pinapagana ang kaganapang ito kapag hide tinawag na ang paraan ng instance. |
hidden.bs.popover | Ang kaganapang ito ay pinapagana kapag ang popover ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS upang makumpleto). |
ipinasok.bs.popover | Ang kaganapang ito ay pinapagana pagkatapos ng show.bs.popover kaganapan kapag ang template ng popover ay naidagdag sa DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})