Popovers
Dokumentazzjoni u eżempji għaż-żieda ta 'popovers Bootstrap, bħal dawk misjuba fl-iOS, ma' kwalunkwe element fuq is-sit tiegħek.
Ħarsa ġenerali
Affarijiet li għandek tkun taf meta tuża l-plugin popover:
- Popovers jiddependu fuq il-librerija tal-parti 3 Popper għall-ippożizzjonar. Int trid tinkludi popper.min.js qabel bootstrap.js jew tuża
bootstrap.bundle.min.js
/bootstrap.bundle.js
li fih Popper sabiex popovers jaħdmu! - Popovers jeħtieġu l- plugin tooltip bħala dipendenza.
- Popovers huma opt-in għal raġunijiet ta' prestazzjoni, għalhekk trid tinizjalizzahom lilek innifsek .
- Tul żero
title
ucontent
valuri qatt mhu se juru popover. - Speċifika
container: 'body'
biex tevita problemi ta' rendering f'komponenti aktar kumplessi (bħal gruppi ta' input tagħna, gruppi ta' buttuni, eċċ). - Li tqajjem popovers fuq elementi moħbija mhux se taħdem.
- Popovers għal
.disabled
jewdisabled
elementi għandhom jiġu attivati fuq element tat-tgeżwir. - Meta attivata minn ankri li jkebbew fuq linji multipli, popovers se jkunu ċċentrati bejn il-wisa 'ġenerali tal-ankri. Uża
.text-nowrap
fuq tiegħek<a>
biex tevita din l-imġieba. - Popovers għandhom ikunu moħbija qabel ma l-elementi korrispondenti tagħhom ikunu tneħħew mid-DOM.
- Popovers jistgħu jiġu attivati grazzi għal element ġewwa dell DOM.
prefers-reduced-motion
-mistoqsija tal-midja. Ara t-
taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .
Kompli aqra biex tara kif jaħdmu popovers b'xi eżempji.
Eżempju: Ippermetti popovers kullimkien
Mod wieħed biex jiġu inizjalizzati l-popovers kollha fuq paġna jkun li tagħżelhom skont l- data-bs-toggle
attribut tagħhom:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Eżempju: Uża l- container
għażla
Meta jkollok xi stili fuq element ġenitur li jinterferixxu ma 'popover, tkun trid tispeċifika custom container
sabiex l-HTML tal-popover jidher f'dak l-element minflok.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Eżempju
<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>
Erba' direzzjonijiet
Erba' għażliet huma disponibbli: fuq, lemin, qiegħ, u xellug allinjat. Id-direzzjonijiet huma riflessi meta tuża Bootstrap f'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>
Tkeċċi fuq ikklikkja li jmiss
Uża l- focus
grillu biex tkeċċi popovers fuq il-klikk li jmiss tal-utent ta 'element differenti mill-element toggle.
Markup speċifiku meħtieġ għal dismiss-on-next-click
Għal imġieba xierqa cross-browser u cross-platform, trid tuża t- <a>
tikketta, mhux it- <button>
tikketta, u trid tinkludi wkoll tabindex
attribut.
<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'
})
Elementi b'diżabilità
L-elementi bl- disabled
attribut mhumiex interattivi, jiġifieri l-utenti ma jistgħux jgħadduhom jew ikklikkjahom biex iqanqlu popover (jew tooltip). Bħala soluzzjoni alternattiva, tkun trid tiskatta l-popover minn tgeżwir <div>
jew <span>
, idealment magħmula li tiffoka fuq it-tastiera billi tuża tabindex="0"
.
Għal popover triggers b'diżabilità, tista 'wkoll tippreferi data-bs-trigger="hover focus"
sabiex il-popover jidher bħala feedback viżwali immedjat lill-utenti tiegħek peress li jistgħu ma jistennewx li jikklikkjaw fuq element b'diżabilità.
<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
Varjabbli
$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);
Użu
Ippermetti popovers permezz ta' JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Li tagħmel popovers jaħdmu għall-utenti tat-tastiera u tat-teknoloġija assistiva
Biex tippermetti lill-utenti tat-tastiera jattivaw il-popovers tiegħek, għandek iżżidhom biss ma' elementi HTML li tradizzjonalment huma ffukati fuq it-tastiera u interattivi (bħal links jew kontrolli tal-formoli). Għalkemm elementi HTML arbitrarji (bħal <span>
s) jistgħu jsiru ffukabbli billi żżid l- tabindex="0"
attribut, dan iżid tab stops potenzjalment tedjanti u konfużi fuq elementi mhux interattivi għall-utenti tat-tastiera, u l-biċċa l-kbira tat-teknoloġiji ta’ assistenza bħalissa ma jħabbrux il-kontenut tal-popover f’din is-sitwazzjoni . Barra minn hekk, tistrieħx biss fuq hover
bħala l-grillu għall-popovers tiegħek, peress li dan jagħmilha impossibbli li jiġu attivati għall-utenti tat-tastiera.
Filwaqt li tista' ddaħħal HTML sinjuri u strutturat f'popovers bl- html
għażla, nirrakkomandaw bil-qawwa li tevita li żżid ammont eċċessiv ta' kontenut. Il-mod kif jaħdmu l-popovers bħalissa huwa li, ladarba jintwerew, il-kontenut tagħhom huwa marbut mal-element grillu bl- aria-describedby
attribut. Bħala riżultat, il-kontenut kollu tal-popover se jitħabbar lill-utenti tat-teknoloġija assistiva bħala fluss wieħed twil u mhux interrott.
Barra minn hekk, filwaqt li huwa possibbli li jiġu inklużi wkoll kontrolli interattivi (bħal elementi tal-formola jew links) fil-popover tiegħek (billi żżid dawn l-elementi mal- allowList
attributi u tags permessi), kun konxju li bħalissa l-popover ma jamministrax l-ordni tal-fokus tat-tastiera. Meta utent tat-tastiera jiftaħ popover, l-attenzjoni tibqa 'fuq l-element ta' attivazzjoni, u peress li l-popover normalment ma jsegwix immedjatament il-grillu fl-istruttura tad-dokument, m'hemm l-ebda garanzija li jimxi 'l quddiem/ippressarTABse tmexxi utent tat-tastiera fil-popover innifsu. Fil-qosor, sempliċiment li żżid kontrolli interattivi ma 'popover x'aktarx li tagħmel dawn il-kontrolli ma jistgħux jintlaħqu/ma jistgħux jintużaw għall-utenti tat-tastiera u l-utenti ta' teknoloġiji ta 'assistenza, jew għall-inqas tagħmel ordni ta' fokus ġenerali illoġika. F'dawn il-każijiet, ikkunsidra li tuża djalogu modali minflok.
Għażliet
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-bs-
, bħal f' data-bs-animation=""
. Kun żgur li tibdel it-tip tal-każ tal-isem tal-għażla minn camelCase għal kebab-case meta tgħaddi l-għażliet permezz tal-attributi tad-dejta. Per eżempju, minflok tuża data-bs-customClass="beautifier"
, uża data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, u
allowList
ma jistgħux jiġu forniti bl-użu ta' attributi tad-dejta.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
animation |
boolean | true |
Applika transizzjoni ta' fade CSS għall-popover |
container |
spag | element | falza | false |
Jwaħħal il-popover ma' element speċifiku. Eżempju: |
content |
spag | element | funzjoni | '' |
Valur tal-kontenut default jekk Jekk tingħata funzjoni, tissejjaħ bir- |
delay |
numru | oġġett | 0 |
Dewmien li juri u jaħbi l-popover (ms) - ma japplikax għat-tip ta' grillu manwali Jekk jiġi fornut numru, id-dewmien jiġi applikat kemm għall-ħbi/turi L-istruttura tal-oġġett hija: |
html |
boolean | false |
Daħħal HTML fil-popover. Jekk falza, innerText il-proprjetà tintuża biex tiddaħħal kontenut fid-DOM. Uża test jekk int inkwetat dwar attakki XSS. |
placement |
spag | funzjoni | 'right' |
Kif tpoġġi l-popover - auto | fuq | qiegħ | xellug | dritt. Meta funzjoni tintuża biex tiddetermina t-tqegħid, tissejjaħ bin-node DOM popover bħala l-ewwel argument tagħha u n-nodu DOM tal-element triggering bħala t-tieni. Il- |
selector |
spag | falza | false |
Jekk jiġi pprovdut selettur, oġġetti popover jiġu delegati lill-miri speċifikati. Fil-prattika, dan jintuża biex jippermetti kontenut HTML dinamiku li jkollu popovers miżjuda. Ara dan u eżempju informattiv . |
template |
spag | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Bażi HTML biex tuża meta toħloq il-popover. Il-popover's Il-popover's
L-element tat-tgeżwir l-aktar 'il barra għandu jkollu l- |
title |
spag | element | funzjoni | '' |
Valur tat-titlu default jekk Jekk tingħata funzjoni, tissejjaħ bir- |
trigger |
spag | 'click' |
Kif jinqabad popover - ikklikkja | iddur | tiffoka | manwal. Inti tista 'tgħaddi triggers multipli; jifredhom bi spazju. manual ma jistax jiġi kkombinat ma' kwalunkwe trigger ieħor. |
fallbackPlacements |
firxa | ['top', 'right', 'bottom', 'left'] |
Iddefinixxi pjazzamenti ta' riżerva billi tipprovdi lista ta' pjazzamenti f'firxa (f'ordni ta' preferenza). Għal aktar informazzjoni irreferi għad-dokumenti tal- imġieba ta’ Popper |
boundary |
spag | element | 'clippingParents' |
Limitu ta' restrizzjoni ta' overflow tal-popover (japplika biss għall-modifikatur preventOverflow ta' Popper). B'mod awtomatiku huwa 'clippingParents' u jista 'jaċċetta referenza HTMLElement (permezz ta' JavaScript biss). Għal aktar informazzjoni irreferi għad- dokumenti detectOverflow ta’ Popper . |
customClass |
spag | funzjoni | '' |
Żid klassijiet mal-popover meta jintwera. Innota li dawn il-klassijiet se jiġu miżjuda flimkien ma' kwalunkwe klassi speċifikata fil-mudell. Biex iżżid klassijiet multipli, isseparahom bi spazji: Tista 'wkoll tgħaddi funzjoni li għandha tirritorna string waħda li fiha ismijiet ta' klassi addizzjonali. |
sanitize |
boolean | true |
Ippermetti jew tiddiżattiva s-sanitizzazzjoni. Jekk jiġi attivat 'template' , 'content' u l- 'title' għażliet jiġu sanitizzati. Ara s- sezzjoni ta' sanitizer fid-dokumentazzjoni JavaScript tagħna . |
allowList |
oġġett | Valur default | Oġġett li fih attributi u tags permessi |
sanitizeFn |
null | funzjoni | null |
Hawnhekk tista 'tforni l-funzjoni ta' sanitizza tiegħek stess. Dan jista 'jkun utli jekk tippreferi tuża librerija ddedikata biex twettaq sanitizzazzjoni. |
offset |
firxa | spag | funzjoni | [0, 8] |
Offset tal-popover relattiv mal-mira tiegħu. Tista' tgħaddi string fl-attributi tad-dejta b'valuri separati bil-virgola bħal: Meta tintuża funzjoni biex tiddetermina l-offset, tissejjaħ b'oġġett li jkun fih it-tqegħid tal-popper, ir-referenza u l-popper rects bħala l-ewwel argument tagħha. L-element triggering node DOM huwa mgħoddi bħala t-tieni argument. Il-funzjoni trid tirritorna firxa b'żewġ numri: . Għal aktar informazzjoni irreferi għad-dokumenti tal- offset ta’ Popper . |
popperConfig |
null | oġġett | funzjoni | null |
Biex tibdel il-konfigurazzjoni ta' Popper default ta' Bootstrap, ara l-konfigurazzjoni ta' Popper . Meta tintuża funzjoni biex tinħoloq il-konfigurazzjoni Popper, tissejjaħ b'oġġett li fih il-konfigurazzjoni Popper default tal-Bootstrap. Jgħinek tuża u tgħaqqad id-default mal-konfigurazzjoni tiegħek stess. Il-funzjoni trid tirritorna oġġett ta 'konfigurazzjoni għal Popper. |
Attributi tad-dejta għal popovers individwali
Għażliet għal popovers individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta, kif spjegat hawn fuq.
Bl-użu tal-funzjoni mapopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metodi
Metodi asinkroniċi u tranżizzjonijiet
Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .
Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .
juru
Tiżvela popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera (jiġifieri qabel ma shown.bs.popover
jseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover. Popovers li t-titlu u l-kontenut tagħhom huma t-tnejn ta' tul żero qatt ma jintwerew.
myPopover.show()
ħabi
Jaħbi popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.popover
jseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover.
myPopover.hide()
toggle
Jiddawwar il-popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.popover
jew ). hidden.bs.popover
Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover.
myPopover.toggle()
jiddisponi
Jaħbi u jeqred il-popover ta' element (Tneħħi d-dejta maħżuna fuq l-element DOM). Popovers li jużaw id-delega (li huma maħluqa bl -użu tal - selector
għażla ) ma jistgħux jinqerdu individwalment fuq elementi trigger dixxendenti.
myPopover.dispose()
jippermettu
Jagħti popover ta' element l-abbiltà li jintwera. Popovers huma attivati awtomatikament.
myPopover.enable()
jiskonnettja
Tneħħi l-abbiltà li tintwera popover ta' element. Il-popover ikun jista' jintwera biss jekk jerġa' jiġi attivat.
myPopover.disable()
toggleEnabled
Jiddawwar il-ħila biex il-popover ta' element jintwera jew moħbi.
myPopover.toggleEnabled()
aġġornament
Taġġorna l-pożizzjoni tal-popover ta' element.
myPopover.update()
getInstance
Metodu statiku li jippermettilek tikseb l-istanza popover assoċjata ma 'element DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Metodu statiku li jippermettilek li tikseb l-istanza popover assoċjata ma' element DOM, jew toħloq waħda ġdida f'każ li ma kinitx inizjalizzata
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Avvenimenti
Tip ta' avveniment | Deskrizzjoni |
---|---|
juru.bs.popover | Dan l-avveniment jispara immedjatament meta show jissejjaħ il-metodu tal-istanza. |
muri.bs.popover | Dan l-avveniment jiġi sparat meta l-popover ikun sar viżibbli għall-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS). |
hide.bs.popover | Dan l-avveniment jiġi sparat immedjatament meta l- hide metodu tal-istanza jkun ġie msejjaħ. |
moħbija.bs.popover | Dan l-avveniment jiġi sparat meta l-popover ikun spiċċa moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS). |
inserit.bs.popover | Dan l-avveniment jiġi sparat wara l- show.bs.popover avveniment meta l-mudell popover ikun ġie miżjud mad-DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})