Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
in English

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.jskei 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 titleme contentnga 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 .disabledranei disabledme 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-nowrapi 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.
Ma te taunoa, ka whakamahia e tenei waahanga te kai horoi i roto i te ihirangi, ka tihorea nga huānga HTML kaore e tino whakaaetia. Tirohia te waahanga sanitizer i roto i a maatau tuhinga JavaScript mo etahi atu korero.
Ko te awe hākoritanga o tēnei wāhanga e whakawhirinaki ana ki te prefers-reduced-motionuiui 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-togglehuanga:

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 containerkō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 containerkia 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 focuskeu 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 tabindexhuanga.

<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 disabledhuanga 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 hoverhei 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 htmlkowhiringa, 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-describedbyhuanga. 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 allowListhuanga 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".

Kia mahara ko nga take haumaru e kore e taea te hoatu i te 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: container: 'body'. He tino whaihua tenei whiringa na te mea ka taea e koe te whakanoho i te popover i roto i te rerenga o te tuhinga e tata ana ki te huānga whakaoho - ka kore te popover e maanu atu i te huānga whakaoho i te huringa o te matapihi.

content aho | huānga | mahi ''

Uara ihirangi taunoa ki data-bs-contentte kore te huanga.

Mena ka hoatu he taumahi, ka karangahia me tana thishuinga tohutoro ki te huānga e piri ana te popover.

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:delay: { "show": 500, "hide": 100 }

html boolean false Kōkuhu HTML ki roto i te poupou. Mena he teka, innerTextka 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 autotauwhāitihia, ka whakahihikohia te pouver.

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 thistautuhia te horopaki ki te tauira popover.

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 titleki roto i te .popover-header.

Ka werohia te popover's contentki roto i te .popover-body.

.popover-arrowka waiho hei pere o te popover.

Ko te huānga takai o waho me whai .popoverakomanga.

title aho | huānga | mahi ''

Te uara taitara taunoa mena titlekarekau he huanga.

Mena ka hoatu he taumahi, ka karangahia me tana thishuinga tohutoro ki te huānga e piri ana te popover.

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. manuale 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ā: 'class-1 class-2'.

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:data-bs-offset="10,20"

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: .[skidding, distance]

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 .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

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.popoverputa 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.popoverputa 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.popoverte hidden.bs.popovertakahanga). 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 selectorwhiringa ) 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 showkarangahia 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 hidekua 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.popovertakahanga i te wa i taapirihia te tauira popover ki te DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})