Popovers
Nyaraka na mifano ya kuongeza popover za Bootstrap, kama zile zinazopatikana katika iOS, kwa kipengele chochote kwenye tovuti yako.
Muhtasari
Mambo ya kujua unapotumia programu-jalizi ya popover:
- Popovers wanategemea maktaba ya wahusika wengine Popper kwa nafasi. Lazima ujumuishe popper.min.js kabla ya bootstrap.js au utumie
bootstrap.bundle.min.js
/bootstrap.bundle.js
ambayo ina Popper ili popover kufanya kazi! - Popover zinahitaji programu- jalizi ya kidokezo kama tegemezi.
- Popover wamejijumuisha kwa sababu za utendakazi, kwa hivyo ni lazima uanzishe wewe mwenyewe .
- Urefu wa sifuri
title
nacontent
maadili hayatawahi kuonyesha popover. - Bainisha
container: 'body'
ili kuepuka kutoa matatizo katika vipengele changamano zaidi (kama vile vikundi vyetu vya ingizo, vikundi vya vitufe, n.k). - Kuanzisha popover kwenye vipengee vilivyofichwa haitafanya kazi.
- Popovers kwa
.disabled
audisabled
vipengele lazima kuanzishwa kwenye kipengele wrapper. - Inapoanzishwa kutoka kwa nanga zinazozunguka mistari mingi, popover zitawekwa katikati kati ya upana wa jumla wa nanga. Tumia
.text-nowrap
kwenye yako<a>
ili kuepuka tabia hii. - Watu masikini lazima wafichwe kabla vipengele vyao vinavyolingana viondolewe kwenye DOM.
- Popovers inaweza kuanzishwa shukrani kwa kipengele ndani ya kivuli DOM.
prefers-reduced-motion
hoja ya midia. Tazama
sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .
Endelea kusoma ili kuona jinsi popover hufanya kazi na baadhi ya mifano.
Mfano: Washa popover kila mahali
Njia moja ya kuanzisha popover zote kwenye ukurasa itakuwa kuzichagua kulingana na data-bs-toggle
sifa zao:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Mfano: Kutumia container
chaguo
Unapokuwa na mitindo fulani kwenye kipengee kikuu ambacho huingilia popover, utataka kubainisha desturi container
ili HTML ya popover ionekane ndani ya kipengele hicho badala yake.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Mfano
<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>
Maelekezo manne
Chaguzi nne zinapatikana: juu, kulia, chini, na kushoto iliyokaa. Maelekezo yanaangaziwa unapotumia Bootstrap katika 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>
Ondoa kwa kubofya ijayo
Tumia focus
kichochezi ili kuondoa popover kwenye mbofyo unaofuata wa mtumiaji wa kipengele tofauti na kipengele cha kugeuza.
Lebo mahususi inahitajika kwa ajili ya kuondoa-on-ifuatayo
Kwa tabia sahihi ya kivinjari na jukwaa-tofauti, lazima utumie <a>
lebo, sio lebo <button>
, na lazima pia ujumuishe tabindex
sifa.
<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'
})
Vipengele vilivyozimwa
Vipengele vilivyo na disabled
sifa havitumiki, kumaanisha kuwa watumiaji hawawezi kuelea au kuvibofya ili kuanzisha popover (au kidokezo). Kama suluhisho, utataka kuibua popover kutoka kwa kanga <div>
au <span>
, iliyofanywa kwa njia bora ya kulenga kibodi kwa kutumia tabindex="0"
.
Kwa vichochezi vya popover vilivyozimwa, unaweza pia kupendelea data-bs-trigger="hover focus"
ili popover ionekane kama maoni ya papo hapo kwa watumiaji wako kwani hawatarajii kubofya kipengele kilichozimwa.
<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
Vigezo
$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);
Matumizi
Washa popover kupitia JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Kufanya popover kufanya kazi kwa watumiaji wa kibodi na teknolojia saidizi
Ili kuruhusu watumiaji wa kibodi kuwezesha popover zako, unapaswa kuziongeza tu kwenye vipengele vya HTML ambavyo kwa kawaida vinaweza kuangazia kibodi na shirikishi (kama vile viungo au vidhibiti vya fomu). Ingawa vipengele vya HTML vya kiholela (kama vile <span>
s) vinaweza kuzingatiwa kwa kuongeza tabindex="0"
sifa, hii itaongeza vichupo vinavyoweza kuudhi na kutatanisha kwenye vipengele visivyoingiliana kwa watumiaji wa kibodi, na teknolojia nyingi za usaidizi kwa sasa hazitangazi maudhui ya popover katika hali hii. . Zaidi ya hayo, usitegemee pekee hover
kama kichochezi cha popover zako, kwa kuwa hii itawafanya wasiweze kuwasha watumiaji wa kibodi.
Ingawa unaweza kuingiza HTML tajiri, iliyopangwa katika popover na html
chaguo, tunapendekeza sana uepuke kuongeza maudhui mengi kupita kiasi. Jinsi popover hufanya kazi kwa sasa ni kwamba, mara tu zinapoonyeshwa, maudhui yao yanaunganishwa na kipengele cha trigger na aria-describedby
sifa. Kwa hivyo, maudhui yote ya popover yatatangazwa kwa watumiaji wa teknolojia ya usaidizi kama mtiririko mmoja mrefu usiokatizwa.
Zaidi ya hayo, ingawa inawezekana pia kujumuisha vidhibiti shirikishi (kama vile vipengele vya fomu au viungo) kwenye popover yako (kwa kuongeza vipengele hivi kwenye allowList
sifa na lebo zinazoruhusiwa), fahamu kwamba kwa sasa popover haidhibiti mpangilio wa ulengaji wa kibodi. Mtumiaji wa kibodi anapofungua popover, umakini hubaki kwenye kipengee cha kuamsha, na kwa vile popover kwa kawaida hafuati kichochezi mara moja katika muundo wa hati, hakuna hakikisho kwamba kusonga mbele/kubonyeza.TABitahamisha mtumiaji wa kibodi kwenye popover yenyewe. Kwa kifupi, kuongeza tu vidhibiti shirikishi kwenye popover kuna uwezekano wa kufanya vidhibiti hivi visifikiwe/kutotumika kwa watumiaji wa kibodi na watumiaji wa teknolojia saidizi, au angalau kufanya mpangilio wa umakini wa jumla usio na mantiki. Katika hali hizi, zingatia kutumia kidirisha cha modal badala yake.
Chaguo
Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-bs-
, kama katika data-bs-animation=""
. Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka kwa camelCase hadi kebab-kesi wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, badala ya kutumia data-bs-customClass="beautifier"
, tumia data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, na
allowList
chaguzi haziwezi kutolewa kwa kutumia sifa za data.
Jina | Aina | Chaguomsingi | Maelezo |
---|---|---|---|
animation |
boolean | true |
Tumia mpito wa kufifisha wa CSS kwenye popover |
container |
kamba | kipengele | uongo | false |
Huongeza popover kwa kipengele maalum. Mfano |
content |
kamba | kipengele | kazi | '' |
Thamani chaguo-msingi ya maudhui ikiwa Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa na |
delay |
nambari | kitu | 0 |
Kuchelewesha kuonyesha na kuficha popover (ms) - haitumiki kwa aina ya kichochezi cha mwongozo Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili Muundo wa kitu ni: |
html |
boolean | false |
Ingiza HTML kwenye popover. Ikiwa sivyo, innerText kipengele kitatumika kuingiza maudhui kwenye DOM. Tumia maandishi ikiwa una wasiwasi kuhusu mashambulizi ya XSS. |
placement |
kamba | kazi | 'right' |
Jinsi ya kuweka popover - otomatiki | juu | chini | kushoto | haki. Chaguo za kukokotoa zinapotumiwa kubainisha uwekaji, huitwa na nodi ya popover DOM kama hoja yake ya kwanza na kipengele cha kuanzisha nodi ya DOM kama ya pili. |
selector |
kamba | uongo | false |
Iwapo kiteuzi kitatolewa, vipengee vya popover vitakabidhiwa kwa malengo yaliyobainishwa. Kwa vitendo, hii inatumika kuwezesha maudhui ya HTML yanayobadilika ili kuongezwa popover. Tazama hii na mfano wa kuelimisha . |
template |
kamba | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
HTML msingi ya kutumia wakati wa kuunda popover. popover's popover's
Kipengele cha kanga cha nje kinapaswa kuwa na |
title |
kamba | kipengele | kazi | '' |
Thamani chaguo-msingi ya kichwa ikiwa Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa na |
trigger |
kamba | 'click' |
Jinsi popover inavyoanzishwa - bofya | tembea | kuzingatia | mwongozo. Unaweza kupitisha vichochezi vingi; kuwatenganisha na nafasi. manual haiwezi kuunganishwa na kichochezi kingine chochote. |
fallbackPlacements |
safu | ['top', 'right', 'bottom', 'left'] |
Bainisha uwekaji nyuma kwa kutoa orodha ya uwekaji katika safu (kwa mpangilio wa upendeleo). Kwa habari zaidi rejelea hati za tabia za Popper |
boundary |
kamba | kipengele | 'clippingParents' |
Kizuizi cha kufurika cha mpaka wa popover (hutumika tu kwa kirekebishaji cha Popper cha kuzuiaOverflow). Kwa chaguo-msingi ni 'clippingParents' na inaweza kukubali rejeleo la HTMLElement (kupitia JavaScript pekee). Kwa maelezo zaidi rejelea hati za detectOverflow za Popper . |
customClass |
kamba | kazi | '' |
Ongeza madarasa kwenye popover inapoonyeshwa. Kumbuka kuwa madarasa haya yataongezwa pamoja na madarasa yoyote yaliyobainishwa kwenye kiolezo. Ili kuongeza madarasa mengi, yatenganishe na nafasi: Unaweza pia kupitisha chaguo za kukokotoa ambazo zinapaswa kurudisha mfuatano mmoja ulio na majina ya ziada ya darasa. |
sanitize |
boolean | true |
Washa au lemaza usafishaji. Ikiwashwa 'template' , 'content' na 'title' chaguzi zitasafishwa. Tazama sehemu ya sanitizer katika hati zetu za JavaScript . |
allowList |
kitu | Thamani chaguomsingi | Kitu ambacho kina sifa na lebo zinazoruhusiwa |
sanitizeFn |
null | kazi | null |
Hapa unaweza kusambaza kazi yako ya kusafisha. Hii inaweza kuwa muhimu ikiwa unapendelea kutumia maktaba maalum kutekeleza usafi wa mazingira. |
offset |
safu | kamba | kazi | [0, 8] |
Kukabiliana na popover kuhusiana na lengo lake. Unaweza kupitisha kamba katika sifa za data na maadili yaliyotenganishwa kwa koma kama: Wakati kipengele cha chaguo za kukokotoa kinapotumiwa kubainisha urekebishaji, huitwa na kitu kilicho na uwekaji wa popper, rejeleo, na miondoko ya popper kama hoja yake ya kwanza. Kipengele cha kuchochea nodi ya DOM hupitishwa kama hoja ya pili. Chaguo la kukokotoa lazima lirudishe safu iliyo na nambari mbili: . Kwa maelezo zaidi rejelea hati za kukabiliana na Popper . |
popperConfig |
null | kitu | kazi | null |
Ili kubadilisha usanidi chaguo-msingi wa Bootstrap wa Popper, angalia usanidi wa Popper . Chaguo za kukokotoa zinapotumiwa kuunda usanidi wa Popper, huitwa na kitu ambacho kina usanidi chaguo-msingi wa Bootstrap wa Popper. Inakusaidia kutumia na kuunganisha chaguo-msingi na usanidi wako mwenyewe. Chaguo la kukokotoa lazima lirudishe kipengee cha usanidi kwa Popper. |
Sifa za data kwa popovers binafsi
Chaguo za popover binafsi zinaweza kubainishwa kwa kutumia sifa za data, kama ilivyoelezwa hapo juu.
Kutumia kipengele napopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Mbinu
Njia za Asynchronous na mabadiliko
Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .
onyesha
Hufichua kuongezeka kwa kipengele. Hurejesha kwa mpigaji simu kabla popover haijaonyeshwa (yaani kabla ya shown.bs.popover
tukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover. Popovers ambao mada na maudhui yao ni ya urefu wa sifuri hayaonyeshwa kamwe.
myPopover.show()
kujificha
Huficha popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijafichwa (yaani kabla ya hidden.bs.popover
tukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.
myPopover.hide()
kugeuza
Hugeuza popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.popover
au hidden.bs.popover
tukio). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.
myPopover.toggle()
tupa
Huficha na kuharibu popover ya kipengele (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM). Popovers zinazotumia utumaji kaumu (ambazo zinaundwa kwa kutumia chaguo )selector
haziwezi kuharibiwa kibinafsi kwenye vipengele vya vichochezi vya kizazi.
myPopover.dispose()
wezesha
Huipa popover ya kipengele uwezo wa kuonyeshwa. Popover huwezeshwa kwa chaguo-msingi.
myPopover.enable()
Lemaza
Huondoa uwezo wa popover ya kipengele kuonyeshwa. Popover itaweza tu kuonyeshwa ikiwa imewashwa tena.
myPopover.disable()
kugeuzaImewashwa
Hugeuza uwezo wa popover ya kipengele kuonyeshwa au kufichwa.
myPopover.toggleEnabled()
sasisha
Inasasisha nafasi ya popover ya kipengele.
myPopover.update()
getInstance
Njia tuli ambayo hukuruhusu kupata mfano wa popover unaohusishwa na kipengee cha DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Njia tuli ambayo hukuruhusu kupata mfano wa popover unaohusishwa na kipengee cha DOM, au kuunda mpya ikiwa haikuanzishwa.
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Matukio
Aina ya tukio | Maelezo |
---|---|
onyesha.bs.umasikini | Tukio hili huwaka mara moja wakati show njia ya mfano inaitwa. |
imeonyeshwa.bs.umasikini | Tukio hili linafutwa wakati popover imefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika). |
ficha.bs.umasikini | Tukio hili linafutwa mara moja wakati hide njia ya mfano imeitwa. |
siri.bs. popover | Tukio hili linafutwa wakati popover imekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika). |
imeingizwa.bs.popover | Tukio hili limefutwa baada ya show.bs.popover tukio wakati kiolezo cha popover kimeongezwa kwenye DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})