Popovers
Tuhituhi me nga tauira mo te taapiri i nga popovers Bootstrap, pera i era i kitea i roto i te iOS, ki tetahi huānga o to pae.
Tirohanga
Nga mea hei mohio ina whakamahi ana i te mono popover:
- Ka whakawhirinaki nga Popovers ki te whare pukapuka tuatoru Popper mo te tuunga. Me whakauru koe i te popper.min.js i mua i te bootstrap.js me te whakamahi ranei
bootstrap.bundle.min.js
/bootstrap.bundle.js
kei roto te Popper kia mahi ai nga popovers! - Ka hiahia nga Popovers ki te mono taputapu taputapu hei whakawhirinakitanga.
- Ka uru mai nga Popovers mo nga take mahi, na me arawhiti koe i a koe ake .
- Ko te roa-kore
title
mecontent
nga uara e kore e whakaatu i te popover. - Tauwhāitihia
container: 'body'
kia karohia nga raru ki roto i nga waahanga uaua ake (penei i a maatau roopu whakauru, roopu paatene, aha atu). - Ka kore e mahi te whakaoho i nga popovers i runga i nga huānga huna.
- Ko nga popovers mo nga huānga
.disabled
raneidisabled
me whakaoho i runga i te huānga takai. - Ina puta mai i nga punga e takai ana ki nga raina maha, ka whakatetahi nga popovers ki waenga i te whanui whanui o nga punga. Whakamahia
.text-nowrap
i runga i to<a>
s ki te karo i tenei whanonga. - Me huna nga Popovers i mua i te tangohanga o ona huānga e rite ana i te DOM.
- Ka taea te whakakorikori i nga popovers na tetahi huānga kei roto i te atarangi DOM.
prefers-reduced-motion
uiui pāpāho. Tirohia te
waahanga motini whakaheke o a maatau tuhinga whakaurunga .
Kia mau ki te panui kia kite i te mahi a nga popovers me etahi tauira.
Tauira: Whakahohehia nga popovers ki nga waahi katoa
Ko tetahi huarahi ki te arawhiti i nga popovers katoa i runga i te wharangi ko te kowhiri ma o raatau data-bs-toggle
huanga:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Tauira: Te whakamahi i te container
kōwhiringa
Mena kei a koe etahi momo ahua i runga i tetahi huānga matua e whakararu ana i te popover, ka hiahia koe ki te tautuhi i tetahi ritenga container
kia puta ai te HTML o te popover i roto i taua huānga.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Tauira
<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>
E wha nga ahunga
E wha nga whiringa e waatea ana: runga, matau, raro me te taha maui. Ka whakaatahia nga ahunga ina whakamahi i a Bootstrap i 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>
Waiho i runga i te patene ka whai ake
Whakamahia te focus
keu ki te whakakore i nga popovers i runga i te paatene a te kaiwhakamahi i muri mai o tetahi huānga rereke atu i te huānga takahuri.
Ko te tohu tohu motuhake e hiahiatia ana mo te whakakore-i-paa-muri
Mo te pai o te kaitirotiro me te whanonga whakawhiti, me whakamahi koe i te <a>
tohu, kaua ko te <button>
tohu, me whakauru ano hoki he tabindex
huanga.
<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'
})
Huānga hauā
Ko nga huānga me te disabled
huanga kaore i te tauwhitiwhiti, ko te tikanga kaore e taea e nga kaiwhakamahi te whakaparo, te paato ranei i a raatau ki te whakaoho i te pouver (te taputapu taputapu ranei). Hei mahi whakatika, ka hiahia koe ki te whakaoho i te popover mai i te takai <div>
, <span>
, i hangaia he papapātuhi-arotahi ma te whakamahi tabindex="0"
.
Mo nga keu popover haua, ka pai pea koe data-bs-trigger="hover focus"
kia puta te popover hei urupare ataata tonu ki o kaiwhakamahi na te mea kare pea ratou e whakaaro ki te paato i tetahi huānga haua.
<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
Taurangi
$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);
Whakamahinga
Whakahohehia nga popovers ma JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Ko te mahi popover mo te papapātuhi me nga kaiwhakamahi hangarau awhina
Hei tuku i nga kaiwhakamahi papapātuhi ki te whakahohe i o popovers, me taapiri noa atu ki nga huānga HTML e aro nui ana ki te papapātuhi me te tauwhitiwhiti (pērā i ngā hononga, ngā mana puka). Ahakoa ko nga huānga HTML noa (pērā i <span>
te s) ka taea te arotahi ma te taapiri i te tabindex="0"
huanga, ka taapiri atu i nga tuunga ripa hoha me te rangirua i runga i nga huānga tauwhitiwhiti-kore mo nga kaiwhakamahi papapātuhi, me te nuinga o nga hangarau awhina i tenei wa kaore i te panui i nga ihirangi o te popover i tenei ahuatanga. . I tua atu, kaua e whakawhirinaki ki runga anake hover
hei keu mo o popovers, na te mea ka kore e taea te whakaoho mo nga kaiwhakamahi papapātuhi.
Ahakoa ka taea e koe te whakauru i te HTML whai rawa, hanganga ki roto i nga popovers me te html
kowhiringa, ka tino tūtohu koe kia karo koe i te taapiri i te nui o nga ihirangi. Ko te huarahi e mahi ai nga popovers i tenei wa, ka whakaatuhia, ka herea o raatau ihirangi ki te huānga whakaoho me te aria-describedby
huanga. Ko te mutunga, ka panuitia te katoa o nga ihirangi o te popover ki nga kaiwhakamahi hangarau awhina hei awa roa, kore e haukotia.
I tua atu, ahakoa ka taea ano te whakauru i nga mana tauwhitiwhiti (pēnei i nga huānga puka, hononga hononga ranei) ki roto i to popover (ma te taapiri i enei huānga ki nga allowList
huanga me nga tohu e whakaaetia ana), kia mohio koe i tenei wa kaore te popover e whakahaere i te raupapa arotahi papapātuhi. Ina whakatuwherahia e te kaiwhakamahi papapātuhi he paopao, ka noho tonu te aro ki te huānga whakaoho, na te mea karekau te popover e whai tonu i te keu i roto i te hanganga o te tuhinga, karekau he taurangi ka neke whakamua/penei.TABka nukuhia he kaiwhakamahi papapātuhi ki roto i te popover ake. Hei poto, ko te taapiri noa i nga mana tauwhitiwhiti ki te popover ka kore e taea e enei mana te toro atu/kaore e taea te whakamahi mo nga kaiwhakamahi papapātuhi me nga kaiwhakamahi hangarau awhina, i te mea iti rawa ranei te hanga i tetahi ota arotahi koretake. I roto i enei ahuatanga, whakaarohia te whakamahi i te korero aratau.
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-bs-
, penei i te data-bs-animation=""
. Kia mohio koe ki te huri i te momo keehi o te ingoa whiringa mai i camelCase ki te kebab-case ka tukuna nga whiringa ma nga huanga raraunga. Hei tauira, hei utu mo te whakamahi data-bs-customClass="beautifier"
, whakamahia data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, me
nga whiringa ma te whakamahi i nga huanga raraunga.allowList
Ingoa | Momo | Taunoa | Whakaahuatanga |
---|---|---|---|
animation |
boolean | true |
Hoatu he whakawhiti memeha CSS ki te popover |
container |
aho | huānga | teka | false |
He taapiri i te pouver ki tetahi huānga motuhake. Tauira: |
content |
aho | huānga | mahi | '' |
Uara ihirangi taunoa ki Mena ka hoatu he taumahi, ka karangahia me tana |
delay |
tau | ahanoa | 0 |
Whakaroa te whakaatu me te huna i te popover (ms) - kaore e pa ki te momo keu a-ringa Mena ka tukuna he nama, ka tukuna he whakaroa ki te huna/whakakitenga e rua Ko te hanganga ahanoa: |
html |
boolean | false |
Kōkuhu HTML ki roto i te poupou. Mena he teka, innerText ka whakamahia nga taonga ki te whakauru ihirangi ki te DOM. Whakamahia te kuputuhi mena kei te awangawanga koe mo nga whakaeke XSS. |
placement |
aho | mahi | 'right' |
Me pehea te whakanoho i te popover - auto | runga | raro | maui | tika. Ina whakamahia he taumahi hei whakatau i te tuunga, ka kiia ko te popover DOM node hei tohenga tuatahi me te huānga whakaoho DOM node hei tuarua. Kua |
selector |
aho | teka | false |
Mena ka tukuna he kaiwhiriwhiri, ka tukuna nga taonga popover ki nga whaainga kua tohua. I roto i te mahi, ka whakamahia tenei hei whakaahei i nga ihirangi HTML hihiri ki te whakauru i nga popovers. Tirohia tenei me tetahi tauira korero . |
template |
aho | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Ko te HTML turanga hei whakamahi i te wa e hanga ana te popover. Ka werohia te popover's Ka werohia te popover's
Ko te huānga takai o waho me whai |
title |
aho | huānga | mahi | '' |
Te uara taitara taunoa mena Mena ka hoatu he taumahi, ka karangahia me tana |
trigger |
aho | 'click' |
Me pehea te whakaoho i te popover - pawhiria | whakaparo | arotahi | ā-ringa. Ka taea e koe te whakawhiti i nga keu maha; wehehia me te waahi. manual e kore e taea te whakakotahi ki tetahi atu keu. |
fallbackPlacements |
huinga | ['top', 'right', 'bottom', 'left'] |
Tautuhia nga waahi whakamuri ma te whakarato i te rarangi o nga tuunga i roto i te rarangi (i runga i te raupapa manakohanga). Mo etahi atu korero tirohia nga tuhinga whanonga a Popper |
boundary |
aho | huānga | 'clippingParents' |
Te rohe herenga puhake o te popover (e pa ana ki te whakakē aukatiOverflow a Popper anake). Ma te taunoa 'clippingParents' ka taea te whakaae ki tetahi tohutoro HTMLElement (ma JavaScript anake). Mo etahi atu korero tirohia nga tuhinga detectOverflow a Popper . |
customClass |
aho | mahi | '' |
Taapirihia nga karaehe ki te poupou ina whakaatuhia. Kia mahara ko enei karaehe ka taapiri atu ki nga karaehe kua tohua ki te tauira. Hei taapiri i nga karaehe maha, wehehia ki nga mokowā: Ka taea hoki e koe te tuku i tetahi mahi hei whakahoki i te aho kotahi kei roto etahi atu ingoa akomanga. |
sanitize |
boolean | true |
Whakahohe, whakakorehia ranei te horoi. Mena ka whakahohehia 'template' , 'content' ka 'title' horoia nga whiringa. Tirohia te waahanga sanitizer i roto i ta maatau tuhinga JavaScript . |
allowList |
ahanoa | Uara taunoa | Ahanoa kei roto nga huanga me nga tohu kua whakaaetia |
sanitizeFn |
null | mahi | null |
I konei ka taea e koe te whakarato i a koe ake mahi horoi. Ka whai hua tenei ki te hiahia koe ki te whakamahi i te whare pukapuka whakatapua ki te mahi horoi. |
offset |
huinga | aho | mahi | [0, 8] |
Wehenga o te popover e pa ana ki tana whaainga. Ka taea e koe te tuku aho ki nga huanga raraunga me nga uara wehea piko penei: Ina whakamahia he taumahi ki te whakatau i te wehenga, ka karangahia me tetahi mea kei roto te tuunga popper, te tohutoro, me te popper rects hei tohenga tuatahi. Ka tukuna te node DOM huānga whakaoho hei tohenga tuarua. Me whakahoki te taumahi i te huānga me nga tau e rua: . Mo etahi atu korero tirohia nga tuhinga a Popper . |
popperConfig |
null | ahanoa | mahi | null |
Hei huri i te whirihora Popper taunoa a Bootstrap, tirohia te whirihoranga a Popper . Ina whakamahia he mahi hei hanga i te whirihoranga Popper, ka karangahia me tetahi mea kei roto te whirihoranga Popper taunoa a Bootstrap. Ka awhina koe ki te whakamahi me te hanumi i te taunoa me to ake whirihoranga. Me whakahoki te mahi i tetahi ahanoa whirihoranga mo Popper. |
Nga huanga raraunga mo nga popovers takitahi
Ko nga whiringa mo nga popovers takitahi ka taea te tautuhi ma te whakamahi i nga huanga raraunga, pera i te whakamarama i runga ake nei.
Te whakamahi mahi mepopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Nga tikanga
Nga tikanga tukutahi me nga whakawhitinga
Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .
whakaatu
He whakaatu i te popover o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te popover (arā i mua i te shown.bs.popover
puta o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te popover. Ko nga Popovers ko te taitara me te ihirangi he kore-roa te roa e kore e whakaatuhia.
myPopover.show()
huna
Hunaia te popover o te huānga. Ka hoki ki te kaiwaea i mua i te hunanga o te popover (arā i mua i te hidden.bs.popover
puta o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te popover.
myPopover.hide()
takahuri
Ka takahuri i te poupou o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga, i hunahia ranei te popover (arā, i mua i te puta o shown.bs.popover
te hidden.bs.popover
takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te popover.
myPopover.toggle()
tuku
Huna me te whakangaro i te popover o te huānga (Ka tango i nga raraunga rongoa i te huānga DOM). Ko nga popovers e whakamahi ana i te tuku (he mea hanga ma te whakamahi i te selector
whiringa ) kaore e taea te whakakore takitahi i runga i nga huānga whakaoho uri.
myPopover.dispose()
taea
Ka hoatu i te popover o tetahi huānga te kaha ki te whakaatu. Ka taea te taunoa te Popovers.
myPopover.enable()
whakakore
Ka tango i te kaha mo te whakaatu i te popover o tetahi huānga. Ka taea anake te whakaatu i te popover mena ka whakahohea ano.
myPopover.disable()
takahuriWhakahohe
Ka takahuri i te kaha mo te whakaatu, te huna ranei i te pouver o tetahi huānga.
myPopover.toggleEnabled()
whakahou
He whakahōu i te tūnga o te popover o te huānga.
myPopover.update()
getInstance
Tikanga pateko e taea ai e koe te tiki i te tauira popover e hono ana ki tetahi huānga DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Tikanga pateko e taea ai e koe te tiki i te tauira popover e hono ana ki tetahi huānga DOM, ki te hanga i tetahi mea hou mena kaore i arawhitia.
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Nga huihuinga
Momo takahanga | Whakaahuatanga |
---|---|
show.bs.popover | Ka pupuhi tenei takahanga ina ka show karangahia te aratuka tauira. |
whakaaturia.bs.popover | Ka pupuhihia tenei takahanga i te wa i kitea ai te popover ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS). |
huna.bs.popover | Ka puhia tonutia tenei takahanga ina hide kua karangahia te aratuka tauira. |
huna.bs.popover | Ka puhia tenei takahanga ina mutu te hunanga o te popover mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS). |
inserted.bs.popover | Ka puhia tenei takahanga i muri i te show.bs.popover takahanga i te wa i taapirihia te tauira popover ki te DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})