Popovers
Dogfennaeth ac enghreifftiau ar gyfer ychwanegu popovers Bootstrap, fel y rhai a geir yn iOS, at unrhyw elfen ar eich gwefan.
Pethau i'w gwybod wrth ddefnyddio'r ategyn popover:
- Mae Popovers yn dibynnu ar Popper.js 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.js er mwyn i popovers weithio! - Mae Popovers angen yr ategyn tooltip fel dibyniaeth.
- Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angen
util.js
. - 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
white-space: nowrap;
ar eich<a>
s i osgoi'r ymddygiad hwn. - Rhaid cuddio popovers cyn i'w elfennau cyfatebol gael eu tynnu o'r DOM.
Daliwch ati i ddarllen i weld sut mae popovers yn gweithio gyda rhai enghreifftiau.
Un ffordd o gychwyn pob popover ar dudalen fyddai eu dewis yn ôl eu data-toggle
priodoledd:
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.
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith.
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-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
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, byddwch chi eisiau sbarduno'r popover o ddeunydd lapio <div>
neu <span>
a diystyru'r pointer-events
elfen anabl.
Ar gyfer sbardunau popover anabl, efallai y byddai'n well gennych hefyd data-trigger="hover"
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" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Galluogi popovers trwy JavaScript:
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-
, fel yn data-animation=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
animeiddiad | boolaidd | gwir | Cymhwyso trawsnewidiad pylu CSS i'r popover |
cynhwysydd | llinyn | elfen | ffug | ffug | Yn atodi'r popover i elfen benodol. Enghraifft: |
cynnwys | llinyn | elfen | swyddogaeth | '' | Gwerth cynnwys diofyn os Os rhoddir ffwythiant, fe'i gelwir gyda'i |
oedi | 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 | ffug | Mewnosod HTML yn y popover. Os yw'n ffug, text bydd dull jQuery yn cael ei ddefnyddio i fewnosod cynnwys yn y DOM. Defnyddiwch destun os ydych chi'n poeni am ymosodiadau XSS. |
lleoliad | llinyn | swyddogaeth | 'iawn' | 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 |
detholwr | llinyn | ffug | ffug | 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 . |
templed | llinyn | '<div class="popover" role="tooltip"><div class="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 |
teitl | llinyn | elfen | swyddogaeth | '' | Gwerth teitl diofyn os Os rhoddir ffwythiant, fe'i gelwir gyda'i |
sbardun | llinyn | 'cliciwch' | Sut mae popover yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Efallai y byddwch yn pasio sbardunau lluosog; eu gwahanu â gofod. ni ellir cyfuno `llaw` ag unrhyw sbardun arall. |
gwrthbwyso | rhif | llinyn | 0 | Gwrthbwyso'r popover o'i gymharu â'i darged. Am ragor o wybodaeth cyfeiriwch at ddogfennau gwrthbwyso Popper.js . |
Lleoliad wrth gefn | llinyn | arae | 'fflip' | Caniatewch i nodi pa safle y bydd Popper yn ei ddefnyddio wrth gefn. Am ragor o wybodaeth cyfeiriwch at ddogfennau ymddygiad Popper.js |
ffin | llinyn | elfen | 'Sgrolio Rhiant' | Ffin cyfyngiad gorlif y popover. Yn derbyn gwerthoedd 'viewport' , 'window' , 'scrollParent' , neu gyfeirnod HTMLElement (JavaScript yn unig). I gael rhagor o wybodaeth, cyfeiriwch at ddogfennau preventOverflow Popper.js . |
Priodoleddau data ar gyfer popovers unigol
Fel arall, gellir pennu opsiynau ar gyfer popovers unigol trwy ddefnyddio priodoleddau data, fel yr eglurir uchod.
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 .
Yn cychwyn popovers ar gyfer casgliad elfennau.
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.
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.
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.
Yn cuddio ac yn dinistrio popover elfen. 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 .
Yn rhoi'r gallu i popover elfen gael ei ddangos. Mae popovers yn cael eu galluogi yn ddiofyn.
Yn dileu'r gallu i ddangos popover elfen. Dim ond os caiff ei ail-alluogi y bydd y popover yn gallu cael ei ddangos.
Toglo'r gallu i popover elfen gael ei ddangos neu ei guddio.
Yn diweddaru lleoliad popover elfen.
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. |