Rach gu prìomh shusbaint Air adhart gu seòladh docs
in English

Popovers

Sgrìobhainnean agus eisimpleirean airson popovers Bootstrap, mar an fheadhainn a lorgar ann an iOS, a chur ri eileamaid sam bith air an làrach agad.

Ro-shealladh

Rudan ri fios nuair a chleachdas tu am plugan popover:

  • Bidh Popovers an urra ris an leabharlann treas pàrtaidh Popper airson a shuidheachadh. Feumaidh tu popper.min.js a thoirt a-steach ro bootstrap.js no cleachd bootstrap.bundle.min.js/ bootstrap.bundle.jsanns a bheil Popper gus am bi popovers ag obair!
  • Feumaidh Popovers am plugan Tooltip mar eisimeileachd.
  • Tha Popovers a’ roghnachadh a-steach airson adhbharan coileanaidh, agus mar sin feumaidh tu iad fhèin a thòiseachadh .
  • Cha nochd fad titleagus contentluachan neoni gu bràth.
  • Sònraich container: 'body'gus duilgheadasan tairgse a sheachnadh ann am pàirtean nas iom-fhillte (mar ar buidhnean cuir a-steach, buidhnean putan, msaa).
  • Chan obraich a bhith ag adhbhrachadh popovers air eileamaidean falaichte.
  • Feumaidh popovers airson .disabledno disabledeileamaidean a bhith air am piobrachadh air eileamaid còmhdaich.
  • Nuair a thèid a bhrosnachadh bho acraichean a bhios a’ cuairteachadh thairis air grunn loidhnichean, bidh popovers stèidhichte eadar leud iomlan nan acraichean. Cleachd .text-nowrapair do chuid <a>gus an giùlan seo a sheachnadh.
  • Feumaidh popovers a bhith falaichte mus tèid na h-eileamaidean co-fhreagarrach aca a thoirt air falbh bhon DOM.
  • Faodar popovers a phiobrachadh le taing do eileamaid taobh a-staigh sgàil DOM.
Gu gnàthach, bidh am pàirt seo a’ cleachdadh an sanitizer susbaint togte, a bhios a’ cuir às do eileamaidean HTML sam bith nach eil ceadaichte gu soilleir. Faic an roinn sanitizer anns na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh.
Tha buaidh beothalachd na co-phàirt seo an urra ri prefers-reduced-motionceist nam meadhanan. Faic an earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .

Cùm a’ leughadh gus faicinn mar a bhios popovers ag obair le eisimpleirean.

Eisimpleir: Dèan comas air popovers anns a h-uile àite

Is e aon dòigh air a h-uile popovers air duilleag a thòiseachadh a bhith gan taghadh a rèir am data-bs-togglefeart:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Eisimpleir: A 'cleachdadh an containerroghainn

Nuair a bhios cuid de stoidhlichean agad air eileamaid phàrant a chuireas bacadh air popover, bidh thu airson cleachdadh a shònrachadh containergus am bi HTML an popover a’ nochdadh taobh a-staigh an eileamaid sin na àite.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

eisimpleir

<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>

Ceithir stiùiridhean

Tha ceithir roghainnean rim faighinn: gu h-àrd, deas, gu h-ìosal agus air an taobh chlì. Tha stiùiridhean air an nochdadh nuair a bhios tu a’ cleachdadh Bootstrap ann an 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>

Cuir às don ath bhriogadh

Cleachd an inneal- focusbrosnachaidh gus popovers a chuir às air an ath bhriogadh aig an neach-cleachdaidh air eileamaid eile seach an eileamaid toggle.

Comharrachadh sònraichte a dhìth airson cuir às-air-an ath-bhriog

Airson giùlan ceart thar-bhrabhsair agus tar-àrd-ùrlar, feumaidh tu an <a>taga a chleachdadh, chan e an <button>taga, agus feumaidh tu feart a tabindexthoirt a-steach cuideachd.

<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'
})

Eileamaidean ciorramach

Chan eil na h-eileamaidean leis a’ disabledfheart eadar-ghnìomhach, a’ ciallachadh nach urrainn do luchd-cleachdaidh gluasad thairis no briogadh orra gus popover (no tooltip) a bhrosnachadh. Mar fhuasgladh obrach, bidh thu airson an popover a bhrosnachadh bho phasgan <div>no <span>, air a dhèanamh le fòcas meur-chlàr le bhith a’ cleachdadh tabindex="0".

Airson luchd-brosnachaidh popover ciorramach, is dòcha gum b’ fheàrr leat cuideachd data-bs-trigger="hover focus"gus am bi am popover a’ nochdadh mar fhios air ais lèirsinneach sa bhad don luchd-cleachdaidh agad oir is dòcha nach bi dùil aca cliogadh air eileamaid ciorramach.

<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

Caochlaidhean

$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);

Cleachdadh

Dèan comas air popovers tro JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Bidh toirt air popovers ag obair dha luchd-cleachdaidh meur-chlàr agus teicneòlas cuideachail

Gus leigeil le luchd-cleachdaidh meur-chlàr na popovers agad a chuir an gnìomh, cha bu chòir dhut ach an cur ri eileamaidean HTML a tha gu traidiseanta le fòcas meur-chlàr agus eadar-ghnìomhach (leithid ceanglaichean no smachdan foirm). Ged a dh’ fhaodar fòcas a chuir air eileamaidean HTML neo-riaghailteach (leithid <span>s) le bhith a’ cur a’ bhuadh ris tabindex="0", cuiridh seo stadan taba a dh’ fhaodadh a bhith dòrainneach agus troimh-chèile air eileamaidean neo-eadar-ghnìomhach airson luchd-cleachdaidh meur-chlàr, agus chan eil a’ mhòr-chuid de theicneòlasan cuideachaidh an-dràsta ag ainmeachadh susbaint an t-seòmair-beò san t-suidheachadh seo. . A bharrachd air an sin, na bi an eisimeil a-mhàin hovermar an inneal brosnachaidh airson na popovers agad, oir nì seo iad do-dhèanta a bhrosnachadh airson luchd-cleachdaidh meur-chlàr.

Fhad ‘s as urrainn dhut HTML beairteach, structarail a chuir a-steach ann am popovers leis an htmlroghainn, tha sinn a’ moladh gu làidir gun seachain thu cus susbaint a chuir ris. Is e an dòigh anns a bheil popovers ag obair an-dràsta, gu bheil an susbaint aca, aon uair ‘s gu bheil e air a thaisbeanadh, ceangailte ris an eileamaid brosnachaidh leis a’ aria-describedbyfheart. Mar thoradh air an sin, thèid susbaint iomlan an popover ainmeachadh do luchd-cleachdaidh teicneòlas cuideachail mar aon sruth fada gun bhriseadh.

A bharrachd air an sin, ged a tha e comasach cuideachd smachdan eadar-ghnìomhach (leithid eileamaidean cruth no ceanglaichean) a thoirt a-steach don popover agad (le bhith a’ cur na h-eileamaidean sin ris na allowListbuadhan agus tagaichean ceadaichte), bi mothachail nach eil am popover an-dràsta a’ riaghladh òrdugh fòcas meur-chlàr. Nuair a dh’ fhosglas neach-cleachdaidh meur-chlàr popover, bidh fòcas fhathast air an eileamaid brosnachaidh, agus leis nach bi am popover mar as trice a’ leantainn an inneal brosnachaidh ann an structar na sgrìobhainn, chan eil gealltanas sam bith ann gun gluais thu air adhart / putadhTABgluaisidh e cleachdaiche meur-chlàr a-steach don popover fhèin. Ann an ùine ghoirid, le bhith a’ cur smachdan eadar-ghnìomhach ri popover tha e coltach gun dèan sin na smachdan sin do-ruigsinneach / do-dhèanta do luchd-cleachdaidh meur-chlàr agus luchd-cleachdaidh theicneòlasan cuideachaidh, no co-dhiù a’ dèanamh òrdugh fòcas iomlan aineolach. Anns na cùisean sin, smaoinich air cleachdadh modal còmhradh na àite.

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-bs-, mar ann an data-bs-animation="". Dèan cinnteach gun atharraich thu an seòrsa cùis den ainm roghainn bho camelCase gu kebab-case nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, an àite a bhith a’ cleachdadh data-bs-customClass="beautifier", cleachd data-bs-custom-class="beautifier".

sanitizeThoir an aire nach urrainn an , sanitizeFn, agus allowListroghainnean a thoirt seachad airson adhbharan tèarainteachd a’ cleachdadh buadhan dàta.
Ainm Seòrsa Deònach Tuairisgeul
animation boolean true Cuir a-steach eadar-ghluasad caol CSS chun popover
container sreang | eileamaid | breugach false

A’ ceangal an popover ri eileamaid shònraichte. Eisimpleir: container: 'body'. Tha an roghainn seo gu sònraichte feumail leis gu bheil e a’ toirt cothrom dhut an popover a shuidheachadh ann an sruthadh na sgrìobhainn faisg air an eileamaid brosnachaidh - a chuireas casg air a’ popover bho bhith a’ seòladh air falbh bhon eileamaid brosnachaidh rè ath-mheudachadh uinneig.

content sreang | eileamaid | gnìomh ''

Luach bunaiteach an t-susbaint mura h data-bs-content-eil am feart an làthair.

Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- thisseata iomraidh aige air an eileamaid ris a bheil am popover ceangailte.

delay àireamh | nì 0

Dàil a’ sealltainn agus a’ falach an popover (ms) - chan eil sin a’ buntainn ri seòrsa brosnachaidh làimhe

Ma thèid àireamh a thoirt seachad, thèid dàil a chuir air an dà sheiche / taisbeanadh

Tha structar an nì:delay: { "show": 500, "hide": 100 }

html boolean false Cuir a-steach HTML a-steach don popover. Ma tha e ceàrr, innerTextthèid seilbh a chleachdadh gus susbaint a chuir a-steach don DOM. Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS.
placement sreang | gnìomh 'right'

Mar a shuidhicheas tu am popover - auto | mullach | bun | clì | deas.
Nuair a thèid autoa shònrachadh, bidh e ag ath-stiùireadh an popover gu dinamach.

Nuair a thèid gnìomh a chleachdadh gus an suidheachadh a dhearbhadh, canar ris an nód popover DOM mar a’ chiad argamaid aige agus an eileamaid brosnachaidh nód DOM mar an dàrna fear. Tha an co- thistheacsa air a shuidheachadh don eisimpleir popover.

selector sreang | breugach false Ma thèid neach-taghaidh a thoirt seachad, thèid nithean popover a thiomnadh gu na targaidean ainmichte. Ann an cleachdadh, tha seo air a chleachdadh gus leigeil le susbaint HTML fiùghantach popovers a chuir ris. Faic seo agus eisimpleir fiosrachail .
template sreang '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Bunait HTML ri chleachdadh nuair a chruthaicheas tu am popover.

Thèid na popovers titlea thoirt a-steach don fhaidhle .popover-header.

Thèid na popovers contenta thoirt a-steach don fhaidhle .popover-body.

.popover-arrowbidh e na shaighead an popover.

Bu chòir gum biodh an .popoverclas aig an eileamaid còmhdaich as fhaide a-muigh.

title sreang | eileamaid | gnìomh ''

Luach an tiotail bunaiteach mura h title-eil am feart an làthair.

Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- thisseata iomraidh aige air an eileamaid ris a bheil am popover ceangailte.

trigger sreang 'click' Mar a thèid popover a bhrosnachadh - cliog | seachain | fòcas | làimhe. Faodaidh tu a dhol seachad air ioma-tharraing; dealachadh riu le àite. manualchan urrainnear a chur còmhla ri inneal brosnachaidh sam bith eile.
fallbackPlacements eagar ['top', 'right', 'bottom', 'left'] Mìnich greisean gnìomhachais le bhith a’ toirt seachad liosta de dh’àiteachan ann an òrdugh (ann an òrdugh roghainn). Airson tuilleadh fiosrachaidh thoir sùil air docaichean giùlan Popper
boundary sreang | eileamaid 'clippingParents' Crìochan casg thar-shruth den popover (a’ buntainn a-mhàin ri inneal-atharrachaidh preventOverflow Popper). Gu gnàthach tha e 'clippingParents'agus gabhaidh e ri iomradh HTMLElement (tro JavaScript a-mhàin). Airson tuilleadh fiosrachaidh thoir sùil air na docaichean detectOverflow aig Popper .
customClass sreang | gnìomh ''

Cuir clasaichean ris an popover nuair a thèid a shealltainn. Thoir an aire gun tèid na clasaichean sin a chur ris a bharrachd air clasaichean sam bith a tha air an sònrachadh san teamplaid. Gus grunn chlasaichean a chur ris, dealaich iad le beàrnan: 'class-1 class-2'.

Faodaidh tu cuideachd gnìomh a thoirt seachad a bu chòir aon sreang a thilleadh anns a bheil ainmean clas a bharrachd.

sanitize boolean true Dèan comas no cuir à comas an slàinteachas. Ma thèid a ghnìomhachadh 'template', 'content'agus 'title'thèid roghainnean a ghlanadh. Faic an roinn sanitizer anns na sgrìobhainnean JavaScript againn .
allowList Luach bunaiteach Rud anns a bheil buadhan agus tagaichean ceadaichte
sanitizeFn null | gnìomh null An seo faodaidh tu an gnìomh slàintealachd agad fhèin a thoirt seachad. Faodaidh seo a bhith feumail mas fheàrr leat leabharlann sònraichte a chleachdadh gus slàinteachas a dhèanamh.
offset eagar | sreang | gnìomh [0, 8]

Offset na popover an coimeas ris an targaid aige. Faodaidh tu sreang a thoirt seachad ann am buadhan dàta le luachan sgaraichte le cromag mar:data-bs-offset="10,20"

Nuair a thèid gnìomh a chleachdadh gus an co-chothromachadh a dhearbhadh, canar le nì anns a bheil suidheachadh popper, an iomradh, agus popper a’ chiad argamaid aige. Tha an eileamaid brosnachaidh DOM air a thoirt seachad mar an dàrna argamaid. Feumaidh an gnìomh sreath a thilleadh le dà àireamh: .[skidding, distance]

Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper .

popperConfig null | nì | gnìomh null

Gus an rèiteachadh Popper bunaiteach aig Bootstrap atharrachadh, faic rèiteachadh Popper .

Nuair a thèid gnìomh a chleachdadh gus an rèiteachadh Popper a chruthachadh, tha e air a ghairm le nì anns a bheil an rèiteachadh Popper bunaiteach aig Bootstrap. Cuidichidh e thu le bhith a’ cleachdadh agus a’ ceangal a’ bhunait leis an rèiteachadh agad fhèin. Feumaidh an gnìomh rud rèiteachaidh a thilleadh airson Popper.

Feartan dàta airson popovers fa leth

Faodar roghainnean airson popovers fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta, mar a chaidh a mhìneachadh gu h-àrd.

A 'cleachdadh gnìomh lepopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .

seall

A’ nochdadh popover eileamaid. Tilleadh chun neach-fios mus deach an popover a nochdadh (ie mus tachair an shown.bs.popovertachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den popover. Chan eil popovers aig a bheil an tiotal agus an t-susbaint fad neoni air an taisbeanadh gu bràth.

myPopover.show()

seiche

A 'falach popover eileamaid. Tillidh e chun neach-fios mus bi an popover falaichte (ie mus tachair an hidden.bs.popovertachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den popover.

myPopover.hide()

tog

Toglaidh popover eileamaid. Tillidh e chun neach-fios mus deach an popover a shealltainn no fhalachshown.bs.popover ( ie mus tachair an hidden.bs.popovertachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den popover.

myPopover.toggle()

cuidhteas

A ’falach agus a’ sgrios popover eileamaid (Thoir air falbh dàta air a stòradh air an eileamaid DOM). Chan urrainnear popovers a chleachdas tiomnadh (a tha air an cruthachadh leis an selectorroghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.

myPopover.dispose()

comasachadh

A’ toirt comas do popover eileamaid a bhith air a shealltainn. Tha popovers air an comasachadh gu bunaiteach.

myPopover.enable()

chur à comas

A’ toirt air falbh comas popover eileamaid a shealltainn. Cha bhith e comasach am popover a shealltainn ach ma thèid a chomasachadh a-rithist.

myPopover.disable()

toggleEnable

Togaidh seo comas popover eileamaid a shealltainn no fhalach.

myPopover.toggleEnabled()

ùrachadh

Ag ùrachadh suidheachadh popover eileamaid.

myPopover.update()

faighinn a-steach

Modh statach a leigeas leat an eisimpleir popover fhaighinn co-cheangailte ri eileamaid DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

faighOrCreateInstance

Dòigh statach a leigeas leat an t-eisimpleir popover fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Tachartasan

Seòrsa tachartas Tuairisgeul
seall.bs.popover Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir.
air a shealltainn.bs.popover Thèid an tachartas seo a losgadh nuair a bhios an popover ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
seiche.bs.popover Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
falaichte.bs.popover Thèid an tachartas seo a losgadh nuair a tha an popover deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
a-steach.bs.popover Thèid an tachartas seo a losgadh às deidh an show.bs.popovertachartais nuair a chaidh an teamplaid popover a chuir ris an DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})