Popovers jedhaman
Dokumantarii fi fakkeenyota Bootstrap popovers, akkuma kanneen iOS keessatti argaman, elementii kamiyyuu marsariitii keessan irratti dabaluudhaaf.
Haala Waliigalaa
Wantoota yeroo popover plugin fayyadamtan beekuu qabdan:
- Popovers ejjennoodhaaf mana kitaabaa qaama 3ffaa Popper irratti hirkatu. Poppers akka hojjetuuf bootstrap.js dura popper.min.js dabaluu qabda ykn
bootstrap.bundle.min.js
/bootstrap.bundle.js
kan Popper of keessaa qabu fayyadamuu qabda! - Popovers akka hirkattummaatti tooltip plugin barbaadu.
- Popovers sababa raawwii hojiitiin opt-in waan ta'aniif ofii keetii jalqabuu qabda .
- Zeeroo-dheerina
title
ficontent
gatiiwwan gonkumaa popover hin agarsiisan. container: 'body'
Qaamolee walxaxaa ta'an keessatti (akka gareewwan galtee keenyaa, gareewwan qaree fi kkf) keessatti rakkoolee agarsiisuu akka hin uumamneef ifteessi .- Elementiiwwan dhokatan irratti popovers kakaasuun hin hojjetu.
- Popovers for
.disabled
ykndisabled
elementoota elementii marfataa irratti kakaafamuu qabu. - Yeroo anchors sarara hedduu qaxxaamuran irraa kakaafamu, popovers bal'ina waliigalaa anchors' gidduutti giddugaleessa ta'a. Amala kana irraa of eeguuf s
.text-nowrap
kee irratti fayyadami .<a>
- Popovers osoo elementoonni isaanii walgitan DOM keessaa hin baafamin dura dhokfamuu qabu.
- Popovers galata elementii shadow DOM keessa jiruun kakaafamuu danda'a.
prefers-reduced-motion
gaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali
.
Fakkeenyota tokko tokkoon popovers akkamitti akka hojjetan ilaaluuf dubbisuu itti fufi.
Fakkeenya: Popovers bakka hundatti dandeessisi
data-bs-toggle
Karaan tokko fuula tokko irratti popovers hunda jalqabsiisuu danda'an amaloota isaaniitiin filachuu ta'a :
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Fakkeenya: container
Filannoo fayyadamuu
container
Yeroo akkaataawwan tokko tokko qaama warraa irratti kanneen popover gidduu seenan qabdu, akka HTML popover'n bakka isaa qaama sana keessaa mul'atutti amala ifteessuu barbaadda .
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Fakkeenya
<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>
Kallattii afur
Filannoon afur ni jiru: gubbaa, mirgaa, jalaa, fi bitaa qindaa'e. Kallattiiwwan yeroo Bootstrap RTL keessatti fayyadamtu calaqqisiifama.
<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>
Cuqaasuu itti aanu irratti hojii irraa ari'i
Cuqaasuu itti aanu fayyadamaa focus
qaama adda ta'e qaama jijjiirraa irraa popovers kuffisuuf kaka'umsa fayyadami.
Mallattoo addaa cuqaasuu itti aanu irratti ari'uuf barbaachisa
Amala qaxxaamuraa-browser fi qaxxaamuraa-waltajjii sirrii ta'eef, mallattoo fayyadamuu qabda malee mallattoo fayyadamuu qabda , akkasumas<a>
amalli hammachuu qabda .<button>
tabindex
<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'
})
Qaamolee hanqifaman
Qaamonni disabled
amaloota qaban wal-qunnamsiisoo miti, jechuun fayyadamtoonni popover (ykn tooltip) kakaasuuf hover ykn cuqaasuu hin danda'an. Akka furmaataatti, popover marfata irraa kakaasuu barbaadda <div>
, <span>
ideally made keyboard-focusable using tabindex="0"
.
Kakaasitoota popover hanqifamaniif, akkasumas data-bs-trigger="hover focus"
akka popover fayyadamtoota keetiif yaada mul'ataa battalumatti mul'atu filachuu dandeessa sababiin isaas isaan qaama hanqifame irratti cuqaasuu hin eegne.
<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 jedhama
Jijjiiramoota
$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);
Fayyadama
Popovers karaa JavaScript dandeessisi:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Popovers fayyadamtoota kiiboordii fi teeknooloojii gargaaraaf akka hojjetu gochuu
Fayyadamtoonni kiiboordii popovers kee akka kakaasan hayyamuuf, elementoota HTML kanneen akka aadaa kiiboordii irratti xiyyeeffachuu danda'anii fi wal-qunnamsiisoo ta'an qofatti dabaluu qabda (kan akka hidhannoo ykn too'annoo unkaa). Qaamolee HTML fedhii malee (kan akka <span>
s) amallicha dabaluudhaan xiyyeeffannoo akka qabaatan gochuun kan danda'amu ta'us tabindex="0"
, kun fayyadamtoota kiiboordiidhaaf qaamolee wal-qunnamtii hin taane irratti dhaabbii caancalaa nama aarsu fi burjaajessu danda'u ni dabala, fi teeknooloojiiwwan gargaaraa baay'een yeroo ammaa haala kana keessatti qabiyyee popover hin beeksisan . hover
Dabalataanis, akka kaka'umsa popovers keessaniif qofa irratti hin hirkatinaa , kunis fayyadamtoota kiiboordiidhaaf kakaasuun akka hin danda'amne waan taasisuuf.
Filannoo waliin popovers keessatti HTML badhaadhaa, caaseffama qabu galchuu kan dandeessu yoo ta'ellee, html
qabiyyee garmalee dabaluu irraa akka of qusattan cimsinee isin gorsina. Akkaataan popovers yeroo ammaa hojjetan, erga agarsiifamee booda, qabiyyeen isaanii elementii kaka'umsaa aria-describedby
amaloota waliin hidhamee jira. Kanarraa kan ka'e, guutummaan qabiyyee popover fayyadamtoota teeknooloojii gargaarsaaf akka yaa'a dheeraa, addaan hin cinne tokkootti ni ifooma.
Dabalataan, too'annoo wal-qunnamtii (kan akka qaamolee unkaa ykn hidhannoo) popover kee keessatti hammachuun kan danda'amu yoo ta'ellee (qaamolee kana gara allowList
amaloota fi mallattoolee hayyamamaniitti dabaluudhaan), yeroo ammaa popover tartiiba xiyyeeffannoo kiiboordii akka hin bulchine beekaa. Yeroo fayyadamaan kiiboordii popover banu, xiyyeeffannaan elementii kakaasu irratti hafa, akkasumas popover yeroo baay'ee caasaa galmee keessatti battalumatti kakaasuu waan hin hordofneef, gara fuulduraatti/dhiibuun wabii hin jiruTABfayyadamaa kiiboordii gara popover ofii isaatii ni sochoosa. Gabaabumatti, salphaatti to'annoo wal-qunnamtii popover tokkotti dabaluun too'annoowwan kana fayyadamtoota kiiboordii fi fayyadamtoota teeknooloojiiwwan gargaarsaatiif akka hin dhaqqabne/hin fayyadamne gochuu hin oolu, ykn yoo xiqqaate tartiiba xiyyeeffannoo waliigalaa loojikii hin qabne taasisuu hin oolu. Haalota kanneen keessatti, bakka isaa qaaqa moodaalii fayyadamuu yaadaa.
Filannoowwan
Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-bs-
, akkuma keessatti dabali data-bs-animation=""
. Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo camelCase irraa gara kebab-case jijjiiruu mirkaneessi. Fakkeenyaaf, fayyadamuu mannaa data-bs-customClass="beautifier"
, fayyadami data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, fi
allowList
amaloota deetaa fayyadamuun dhiyeessuu hin danda'an.
Maqaa | Akaakuu | Durtii dha | Ibsa |
---|---|---|---|
animation |
boolee | true |
Ce'umsa CSS fade gara popover tti hojiirra oolchi |
container |
tarree | elementii | soba | false |
Poopover elementii murtaa'e tokkotti dabalata. Fakkeenyaaf: |
content |
tarree | elementii | faayidaa | '' |
Gatii qabiyyee durtii yoo Yoo faankishiniin kenname, |
delay |
lakkoofsa | meeshaa | 0 |
Harkifannaa agarsiisuu fi dhoksuu popover (ms) - gosa kaka'umsa harkaa irratti hin hojjetu Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola Caasaan wantaa: 1.1. |
html |
boolee | false |
HTML popover keessa galchi. Yoo soba ta'e, innerText qabeentiin qabiyyee gara DOMtti galchuuf ni fayyadama. Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami. |
placement |
tarree | faayidaa | 'right' |
Akkaataa popover itti dhaabdan - auto | gubbaa | jalaa | bitaa | sirrii. Faankishiniin tokko iddoo murteessuuf yeroo fayyadamu, noodiin popover DOM akka falmii isaa isa jalqabaatti fi elementii kakaasu DOM noodiin akka lammaffaatti waamama. Yaadni |
selector |
tarree | soba | false |
Yoo filataan kenname, wantoonni popover galmoota ifteessamaniif ni kennamu. Qabatamaan, kun qabiyyee HTML daayinamikii popovers akka dabalaman dandeessisuuf fayyadama. Kanaa fi fakkeenya odeeffannoo qabu ilaalaa . |
template |
hidhaa | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
HTML yeroo popover uumtu fayyadamuuf bu'uura. Popover's Popover's
Qaamni marfataa alaa |
title |
tarree | elementii | faayidaa | '' |
Gatii mata duree durtii yoo Yoo faankishiniin kenname, |
trigger |
hidhaa | 'click' |
Akkaataa popover itti kakaasu - | cuqaasaa hover | xiyyeeffannoo | kan harkaanii. Kaka’umsa hedduu darbuu dandeessa; bakka adda baasuun addaan baasuu. manual trigger biraa kamiinuu walitti makamuu hin danda’u. |
fallbackPlacements |
tarree | ['top', 'right', 'bottom', 'left'] |
Tarree iddoowwan tarree keessatti (tartiiba filannootiin) kennuudhaan iddoowwan duubatti deebi'uu ibsi. Odeeffannoo dabalataaf docs amala Popper ilaali |
boundary |
tarree | qabiyyee | 'clippingParents' |
Daangaa danqaa dhangala'aa popover (fooyyessaa PreventOverflow Popper qofa irratti hojjeta). Akka durtiitti 'clippingParents' wabii HTMLElement (karaa JavaScript qofa) fudhachuu fi fudhachuu danda'a. Odeeffannoo dabalataaf Popper's detectOverflow docs ilaali . |
customClass |
tarree | faayidaa | '' |
Yeroo agarsiifamu popover irratti kutaalee dabali. Hubadhu, gitawwan kun gitawwan kamiyyuu unkaa keessatti ifteessaman irratti dabalataan akka dabalaman. Gitoota hedduu dabaluudhaaf, iddoowwan addaan baafadhu: Akkasumas faankishinii tarree tokko maqaa gita dabalataa of keessaa qabu deebisuu qabu dabarsuu dandeessa. |
sanitize |
boolee | true |
Sanitization dandeessisi ykn hanqisi. If activated 'template' , 'content' fi 'title' filannoowwan sanitized ta'u. Kutaa saanitaayizarii galmee JaavaScript keenya keessatti ilaali . |
allowList |
meeshaa | Gatii durtii | Wanti amaloota fi mallattoolee hayyamaman of keessaa qabu |
sanitizeFn |
null | faayidaa | null |
Asirratti sanitize function mataa keessanii dhiyeessuu dandeessu. Kun faayidaa qabaachuu danda’a yoo mana kitaabaa addaa fayyadamuun qulqulleessuu raawwachuu barbaadde. |
offset |
array | tarree | faayidaa | [0, 8] |
Ofseeti popover kan galma isaa wajjin wal bira qabamee yoo ilaalamu. Amaloota deetaa keessatti tarree gatiiwwan komaandiin addaan baafaman akka: Faankishiniin tokko ofseeti murteessuuf yeroo fayyadamu, wanta iddoo popper, wabii, fi popper rects akka falmii isaa isa jalqabaatti of keessaa qabuun waama. Qaamni kakaasu DOM noodiin akka falmii lammaffaatti darba. Faankishinichi tarree lakkoofsota lama qabu deebisuu qaba: . Odeeffannoo dabalataaf Popper's offset docs ilaali . |
popperConfig |
null | wanta | faayidaa | null |
Qindaa'ina Popper durtii Bootstrap jijjiiruuf, qindeessaa Popper ilaali . Yeroo faankishiniin qindeessaa Popper uumuuf fayyadamu, wanta qindeessaa Popper durtii Bootstrap of keessaa qabuun waamama. Durtii qindeessaa mataa keetiin fayyadamuu fi walitti makuuf si gargaara. Faankishinichi wanta qindeessaa Popperiif deebisuu qaba. |
Amaloota deetaa popovers dhuunfaa
Filannoon popovers dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama, akkuma armaan olitti ibsame.
Faankishinii waliin fayyadamuupopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Malawwan
Malawwanii fi ce’umsawwan wal hin simne
Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .
agarsiisuu
Poopover elementii tokkoo mul'isa. Poopover qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.popover
taatee osoo hin uumamin dura) gara waamichaatti deebi'a. Kun akka “harkaan” popover kakaasutti ilaalama. Popovers mata duree fi qabiyyeen isaanii lamaan isaanii dheerina zeeroo ta'an gonkumaa hin agarsiifaman.
myPopover.show()
dhoksuu
Poopover elementii tokkoo dhoksa. Osoo popover qabatamaan hin dhokatin (jechuun osoo hidden.bs.popover
taatee hin uumamin dura) gara waamichaatti deebi'a. Kun akka “harkaan” popover kakaasutti ilaalama.
myPopover.hide()
toggle jechuun ni danda'ama
Poopover elementii tokkoo jijjiira. Osoo popover qabatamaan hin agarsiifamin ykn hin dhokatiin dura gara waamichaatti deebi'a (jechuunis osoo taatee shown.bs.popover
ykn hin uumamin dura hidden.bs.popover
). Kun akka “harkaan” popover kakaasutti ilaalama.
myPopover.toggle()
gatuu
Poopover elementii dhoksuu fi balleessa (Deetaa elementii DOM irratti kuufame haqa). Popovers kanneen delegation fayyadaman ( kanneen selector
filannoo fayyadamuun uumaman ) elementoota kaka'umsa sanyii irratti dhuunfaan balleessuu hin danda'an.
myPopover.dispose()
dandeessisuu
Poopover elementii tokkoo dandeettii agarsiifamuu kenna. Popovers durtiidhan dandeessifama.
myPopover.enable()
akka hin hojjenne gochuu
Dandeettii popover elementii tokkoo agarsiisuuf qabu ni haqa. Popover agarsiisuu kan danda'u yoo irra deebi'amee dandeessifame qofa.
myPopover.disable()
toggleDandeessifame
Dandeettii popover elementii akka agarsiifamu ykn dhokfamuuf jijjiira.
myPopover.toggleEnabled()
odeeffannoo dhiyeenyaa
Ejjennoo popover elementii tokkoo fooyyessa.
myPopover.update()
Fakkeenya argadhu
Mala istaatiksii kan fakkeenya popover elementii DOM waliin walqabate argachuuf si dandeessisu
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Fakkeenya argadhuYknUumi
Mala static kan fakkeenya popover elementii DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Taateewwan
Gosa taatee | Ibsa |
---|---|
agarsiisi.bs.hiyyummaa | Taatee kun yeroo show mala fakkeenyaa waamamu battalumatti dhukaasa. |
agarsiise.bs.hiyyummaa | Taatee kun yeroo popover fayyadamaaf mul'atu taasifamu ni ari'ama (ce'umsa CSS xumuramu ni eega). |
dhoksi.bs.hiyyummaa | Taatee kun yeroo hide mala fakkeenyaa waamame battalumatti dhukaafama. |
dhokataa.bs.hiyyummaa | Taatee kun yeroo popover fayyadamaa irraa dhokatee xumure ni ari'ama (ce'umsa CSS xumuramu ni eega). |
galfame.bs.hiyyummaa | Taatee kun taatee booda show.bs.popover yeroo unkaan popover DOM irratti dabalame ari'ama. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})