Popovers
Dogfennaeth ac enghreifftiau ar gyfer ychwanegu popovers Bootstrap, fel y rhai a geir yn iOS, at unrhyw elfen ar eich gwefan.
Trosolwg
Pethau i'w gwybod wrth ddefnyddio'r ategyn popover:
- Mae Popovers yn dibynnu ar Popper llyfrgell 3ydd parti ar gyfer lleoli. Rhaid i chi gynnwys popper.min.js cyn bootstrap.js neu use
bootstrap.bundle.min.js
/bootstrap.bundle.js
sy'n cynnwys Popper er mwyn i popovers weithio! - Mae Popovers angen yr ategyn tooltip fel dibyniaeth.
- Mae popovers yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
- Ni fydd sero-hyd
title
acontent
gwerthoedd byth yn dangos popover. - Nodwch
container: 'body'
er mwyn osgoi problemau rendro mewn cydrannau mwy cymhleth (fel ein grwpiau mewnbwn, grwpiau botwm, ac ati). - Ni fydd sbarduno popovers ar elfennau cudd yn gweithio.
- Rhaid sbarduno popovers ar gyfer
.disabled
neudisabled
elfennau ar elfen lapio. - Pan gânt eu hysgogi o angorau sy'n lapio ar draws llinellau lluosog, bydd popovers yn cael eu canoli rhwng lled cyffredinol yr angorau. Defnyddiwch
.text-nowrap
ar eich<a>
s i osgoi'r ymddygiad hwn. - Rhaid cuddio popovers cyn i'w elfennau cyfatebol gael eu tynnu o'r DOM.
- Gellir sbarduno popovers diolch i elfen y tu mewn i DOM cysgodol.
prefers-reduced-motion
ymholiad y cyfryngau. Gweler
adran cynnig gostyngol ein dogfennaeth hygyrchedd .
Daliwch ati i ddarllen i weld sut mae popovers yn gweithio gyda rhai enghreifftiau.
Enghraifft: Galluogi popovers ym mhobman
Un ffordd o gychwyn pob popover ar dudalen fyddai eu dewis yn ôl eu data-bs-toggle
priodoledd:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Enghraifft: Defnyddio'r container
opsiwn
Pan fydd gennych rai arddulliau ar elfen rhiant sy'n ymyrryd â popover, byddwch am nodi arferiad container
fel bod HTML y popover yn ymddangos o fewn yr elfen honno yn lle hynny.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Enghraifft
<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>
Pedwar cyfeiriad
Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith. Caiff cyfarwyddiadau eu hadlewyrchu wrth ddefnyddio Bootstrap yn 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>
Diystyru ar y clic nesaf
Defnyddiwch y focus
sbardun i ddiystyru popovers ar glic nesaf y defnyddiwr ar elfen wahanol i'r elfen togl.
Mae angen marcio penodol ar gyfer diswyddo-ar-glic nesaf
Ar gyfer ymddygiad traws-borwr a thraws-lwyfan priodol, rhaid i chi ddefnyddio'r <a>
tag, nid y <button>
tag, a rhaid i chi hefyd gynnwys tabindex
priodoledd.
<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'
})
Elfennau anabl
Nid yw elfennau gyda'r disabled
priodoledd yn rhyngweithiol, sy'n golygu na all defnyddwyr hofran na chlicio arnynt i sbarduno popover (neu gyngor). Fel ateb i'r broblem, byddwch am sbarduno'r popover o ddeunydd lapio <div>
neu <span>
, sy'n ddelfrydol wedi'i wneud â ffocws bysellfwrdd gan ddefnyddio tabindex="0"
.
Ar gyfer sbardunau popover anabl, efallai y byddai'n well gennych hefyd data-bs-trigger="hover focus"
fel bod y popover yn ymddangos fel adborth gweledol uniongyrchol i'ch defnyddwyr oherwydd efallai na fyddant yn disgwyl clicio ar elfen anabl.
<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
Newidynnau
$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);
Defnydd
Galluogi popovers trwy JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Gwneud i popovers weithio i ddefnyddwyr bysellfwrdd a thechnoleg gynorthwyol
Er mwyn galluogi defnyddwyr bysellfwrdd i actifadu eich popovers, dim ond at elfennau HTML sy'n draddodiadol yn canolbwyntio ar fysellfyrddau ac yn rhyngweithiol y dylech eu hychwanegu (fel dolenni neu reolaethau ffurf). <span>
Er y gellir gwneud elfennau HTML mympwyol (fel s) yn ffocws trwy ychwanegu'r tabindex="0"
priodoledd, bydd hyn yn ychwanegu stopiau tab a allai fod yn annifyr a dryslyd ar elfennau nad ydynt yn rhyngweithiol ar gyfer defnyddwyr bysellfwrdd, ac ar hyn o bryd nid yw'r rhan fwyaf o dechnolegau cynorthwyol yn cyhoeddi cynnwys y popover yn y sefyllfa hon . Yn ogystal, peidiwch â dibynnu'n llwyr arno hover
fel sbardun eich popovers, gan y bydd hyn yn eu gwneud yn amhosibl eu sbarduno i ddefnyddwyr bysellfwrdd.
Er y gallwch fewnosod HTML cyfoethog, strwythuredig mewn popovers gyda'r html
opsiwn, rydym yn argymell yn gryf eich bod yn osgoi ychwanegu gormod o gynnwys. Y ffordd y mae popovers yn gweithio ar hyn o bryd yw bod eu cynnwys, ar ôl ei arddangos, yn gysylltiedig â'r elfen sbardun gyda'r aria-describedby
priodoledd. O ganlyniad, bydd holl gynnwys y popover yn cael ei gyhoeddi i ddefnyddwyr technoleg gynorthwyol fel un ffrwd hir, ddi-dor.
Yn ogystal, er ei bod hi'n bosibl cynnwys rheolyddion rhyngweithiol (fel elfennau ffurf neu ddolenni) yn eich popover (trwy ychwanegu'r elfennau hyn at y allowList
priodoleddau a'r tagiau a ganiateir), byddwch yn ymwybodol nad yw'r popover yn rheoli trefn ffocws bysellfwrdd ar hyn o bryd. Pan fydd defnyddiwr bysellfwrdd yn agor popover, mae'r ffocws yn parhau ar yr elfen sbarduno, a chan nad yw'r popover fel arfer yn dilyn y sbardun yn strwythur y ddogfen ar unwaith, nid oes unrhyw sicrwydd symud ymlaen / pwysoTAByn symud defnyddiwr bysellfwrdd i'r popover ei hun. Yn fyr, mae ychwanegu rheolyddion rhyngweithiol at popover yn debygol o wneud y rheolyddion hyn yn anghyraeddadwy/annefnyddiadwy i ddefnyddwyr bysellfwrdd a defnyddwyr technolegau cynorthwyol, neu o leiaf yn creu trefn ffocws cyffredinol afresymegol. Yn yr achosion hyn, ystyriwch ddefnyddio deialog moddol yn lle hynny.
Opsiynau
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-
, fel yn data-bs-animation=""
. Gwnewch yn siŵr eich bod yn newid math achos enw'r opsiwn o camelCase i achos cebab wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, yn lle defnyddio data-bs-customClass="beautifier"
, defnyddiwch data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, ac
opsiynau gan ddefnyddio priodoleddau data.allowList
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
animation |
boolaidd | true |
Cymhwyso trawsnewidiad pylu CSS i'r popover |
container |
llinyn | elfen | ffug | false |
Yn atodi'r popover i elfen benodol. Enghraifft: |
content |
llinyn | elfen | swyddogaeth | '' |
Gwerth cynnwys diofyn os Os rhoddir ffwythiant, fe'i gelwir gyda'i |
delay |
rhif | gwrthrych | 0 |
Oedi wrth ddangos a chuddio'r popover (ms) - nid yw'n berthnasol i'r math sbardun â llaw Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe Strwythur gwrthrych yw: |
html |
boolaidd | false |
Mewnosod HTML yn y popover. Os yw'n ffug, innerText bydd eiddo'n cael ei ddefnyddio i fewnosod cynnwys yn y DOM. Defnyddiwch destun os ydych chi'n poeni am ymosodiadau XSS. |
placement |
llinyn | swyddogaeth | 'right' |
Sut i leoli'r popover - auto | brig | gwaelod | chwith | iawn. Pan ddefnyddir swyddogaeth i benderfynu ar y lleoliad, fe'i gelwir gyda'r nod DOM popover fel ei ddadl gyntaf a'r elfen sbarduno nod DOM fel ei ail. Mae'r |
selector |
llinyn | ffug | false |
Os darperir dewisydd, bydd gwrthrychau popover yn cael eu dirprwyo i'r targedau penodedig. Yn ymarferol, defnyddir hwn i alluogi cynnwys HTML deinamig i ychwanegu popovers. Gweler hyn ac enghraifft llawn gwybodaeth . |
template |
llinyn | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Sylfaen HTML i'w ddefnyddio wrth greu'r popover. Bydd y popover's Bydd y popover's
Dylai'r elfen lapio allanol fod â'r |
title |
llinyn | elfen | swyddogaeth | '' |
Gwerth teitl diofyn os Os rhoddir ffwythiant, fe'i gelwir gyda'i |
trigger |
llinyn | 'click' |
Sut mae popover yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Efallai y byddwch yn pasio sbardunau lluosog; eu gwahanu â gofod. manual ni ellir ei gyfuno ag unrhyw sbardun arall. |
fallbackPlacements |
arae | ['top', 'right', 'bottom', 'left'] |
Diffiniwch leoliadau wrth gefn trwy ddarparu rhestr o leoliadau mewn trefn (yn nhrefn blaenoriaeth). Am ragor o wybodaeth cyfeiriwch at ddogfennau ymddygiad Popper |
boundary |
llinyn | elfen | 'clippingParents' |
Ffin cyfyngiad gorlif y popover (yn berthnasol i addasydd preventOverflow Popper yn unig). Yn ddiofyn mae'n 'clippingParents' gyfeirnod HTMLElement a gall dderbyn (trwy JavaScript yn unig). Am ragor o wybodaeth cyfeiriwch at ddogfennau detectOverflow Popper . |
customClass |
llinyn | swyddogaeth | '' |
Ychwanegu dosbarthiadau at y popover pan fydd yn cael ei ddangos. Sylwch y bydd y dosbarthiadau hyn yn cael eu hychwanegu yn ychwanegol at unrhyw ddosbarthiadau a nodir yn y templed. I ychwanegu dosbarthiadau lluosog, gwahanwch nhw gyda bylchau: Gallwch hefyd basio swyddogaeth a ddylai ddychwelyd un llinyn yn cynnwys enwau dosbarth ychwanegol. |
sanitize |
boolaidd | true |
Galluogi neu analluogi'r glanweithdra. Os caiff ei actifadu 'template' , 'content' a 'title' bydd opsiynau'n cael eu diheintio. Gweler yr adran glanweithydd yn ein dogfennaeth JavaScript . |
allowList |
gwrthrych | Gwerth diofyn | Gwrthrych sy'n cynnwys priodoleddau a thagiau a ganiateir |
sanitizeFn |
null | swyddogaeth | null |
Yma gallwch gyflenwi eich swyddogaeth glanweithdra eich hun. Gall hyn fod yn ddefnyddiol os yw'n well gennych ddefnyddio llyfrgell bwrpasol i wneud glanweithdra. |
offset |
arae | llinyn | swyddogaeth | [0, 8] |
Gwrthbwyso'r popover o'i gymharu â'i darged. Gallwch chi basio llinyn mewn priodoleddau data gyda gwerthoedd wedi'u gwahanu gan goma fel: Pan ddefnyddir swyddogaeth i bennu'r gwrthbwyso, fe'i gelwir gyda gwrthrych sy'n cynnwys y lleoliad popper, y cyfeirnod, a phopper recs fel ei ddadl gyntaf. Mae nod DOM yr elfen sbarduno yn cael ei basio fel yr ail ddadl. Rhaid i'r ffwythiant ddychwelyd arae gyda dau rif: . Am ragor o wybodaeth cyfeiriwch at ddogfennau gwrthbwyso Popper . |
popperConfig |
null | gwrthrych | swyddogaeth | null |
I newid ffurfweddiad Popper rhagosodedig Bootstrap, gweler cyfluniad Popper . Pan ddefnyddir swyddogaeth i greu'r cyfluniad Popper, fe'i gelwir gyda gwrthrych sy'n cynnwys cyfluniad Popper rhagosodedig Bootstrap. Mae'n eich helpu i ddefnyddio ac uno'r rhagosodiad gyda'ch ffurfweddiad eich hun. Rhaid i'r swyddogaeth ddychwelyd gwrthrych cyfluniad ar gyfer Popper. |
Priodoleddau data ar gyfer popovers unigol
Fel arall, gellir pennu opsiynau ar gyfer popovers unigol trwy ddefnyddio priodoleddau data, fel yr eglurir uchod.
Defnyddio swyddogaeth gydapopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Dulliau
Dulliau a thrawsnewidiadau anghydamserol
Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .
dangos
Yn datgelu popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos (hy cyn i'r shown.bs.popover
digwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover. Nid yw popovers y mae eu teitl a'u cynnwys o hyd sero byth yn cael eu harddangos.
myPopover.show()
cuddio
Yn cuddio popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei guddio (hy cyn i'r hidden.bs.popover
digwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover.
myPopover.hide()
togl
Toglo popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos neu ei guddio (hy cyn i'r digwyddiad shown.bs.popover
neu'r hidden.bs.popover
digwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover.
myPopover.toggle()
gwared
Yn cuddio ac yn dinistrio popover elfen (Yn dileu data sydd wedi'i storio ar yr elfen DOM). Ni all popovers sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector
) gael eu dinistrio'n unigol ar elfennau sbardun disgynyddion .
myPopover.dispose()
galluogi
Yn rhoi'r gallu i popover elfen gael ei ddangos. Mae popovers yn cael eu galluogi yn ddiofyn.
myPopover.enable()
analluogi
Yn dileu'r gallu i ddangos popover elfen. Dim ond os caiff ei ail-alluogi y bydd y popover yn gallu cael ei ddangos.
myPopover.disable()
toggleEnabled
Toglo'r gallu i popover elfen gael ei ddangos neu ei guddio.
myPopover.toggleEnabled()
diweddariad
Yn diweddaru lleoliad popover elfen.
myPopover.update()
caelInstance
Dull statig sy'n eich galluogi i gael yr enghraifft popover sy'n gysylltiedig ag elfen DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Dull statig sy'n eich galluogi i gael yr enghraifft popover yn gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Digwyddiadau
Math o ddigwyddiad | Disgrifiad |
---|---|
sioe.bs.popover | Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. |
dangos.bs.popover | Mae'r digwyddiad hwn yn cael ei danio pan fydd y popover wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
cuddio.bs.popover | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull enghraifft wedi'i alw. |
cudd.bs.popover | Mae'r digwyddiad hwn yn cael ei danio pan fydd y popover wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
mewnosod.bs.popover | Mae'r digwyddiad hwn yn cael ei danio ar ôl y show.bs.popover digwyddiad pan fydd y templed popover wedi'i ychwanegu at y DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})