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.js
anns 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
title
aguscontent
luachan 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
.disabled
nodisabled
eileamaidean 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-nowrap
air 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.
prefers-reduced-motion
ceist 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-toggle
feart:
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 container
roghainn
Nuair a bhios cuid de stoidhlichean agad air eileamaid phàrant a chuireas bacadh air popover, bidh thu airson cleachdadh a shònrachadh container
gus 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- focus
brosnachaidh 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 tabindex
thoirt 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’ disabled
fheart 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 hover
mar 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 html
roghainn, 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-describedby
fheart. 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 allowList
buadhan 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"
.
sanitize
Thoir an aire nach urrainn an ,
sanitizeFn
, agus
allowList
roghainnean 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: |
content |
sreang | eileamaid | gnìomh | '' |
Luach bunaiteach an t-susbaint mura h Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- |
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ì: |
html |
boolean | false |
Cuir a-steach HTML a-steach don popover. Ma tha e ceàrr, innerText thè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 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- |
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 Thèid na popovers
Bu chòir gum biodh an |
title |
sreang | eileamaid | gnìomh | '' |
Luach an tiotail bunaiteach mura h Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- |
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. manual chan 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: 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 |
nì | 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: 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: . 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.popover
tachartas). 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.popover
tachartas). 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.popover
tachartas). 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 selector
roghainn ) 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 show a 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 hide dò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.popover tachartais nuair a chaidh an teamplaid popover a chuir ris an DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})