Popovers
Zure webguneko edozein elementutan Bootstrap popover-ak gehitzeko dokumentazioa eta adibideak, iOS-en aurkitzen direnak bezala.
Ikuspegi orokorra
Popover plugina erabiltzean jakin beharrekoak:
- Popovers Popper hirugarren liburutegian oinarritzen dira kokapenerako. Popper.min.js sartu behar duzu bootstrap.js baino lehen edo Popper duen
bootstrap.bundle.min.js
/ erabilibootstrap.bundle.js
behar duzu popover-ek funtziona dezan! - Popover-ek tooltip plugina behar dute menpekotasun gisa.
- Gure JavaScript iturburutik eraikitzen ari bazara, beharrezkoa
util.js
da . - Popover-ak errendimendu arrazoiengatik aukeratzen dira, beraz, zuk zeuk hasieratu behar dituzu .
- Zero-luzera
title
etacontent
balioek ez dute inoiz popover bat erakutsiko. - Zehaztu
container: 'body'
osagai konplexuagoetan (adibidez, gure sarrera-taldeak, botoi-taldeak, etab.) arazoak errendatzea saihesteko. - Ezkutuko elementuetan popover-ak abiarazteak ez du funtzionatuko.
.disabled
Elementu edo elementuen popover-disabled
ak bilgarri-elementu batean abiarazi behar dira.- Hainbat lerrotan biltzen diren ainguretatik abiarazten denean, popover-ak ainguraren zabalera osoaren artean zentratuko dira. Erabili
.text-nowrap
zure aldean<a>
portaera hori saihesteko. - Popover-ak ezkutatu egin behar dira dagozkien elementuak DOMetik kendu aurretik.
- Popovers itzal DOM baten barruan dagoen elementu bati esker abiarazi daitezke.
prefers-reduced-motion
multimedia kontsultaren menpe dago. Ikusi
gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .
Jarraitu irakurtzen popover-ek adibide batzuekin nola funtzionatzen duten ikusteko.
Adibidea: gaitu popover-ak nonahi
Orrialde bateko popover guztiak hasieratzeko modu bat haien data-toggle
atributuaren arabera hautatzea izango litzateke:
$(function () {
$('[data-toggle="popover"]').popover()
})
Adibidea: container
aukera erabiltzea
Popover-a oztopatzen duten elementu nagusi batean estilo batzuk dituzunean, pertsonalizatu bat zehaztu nahi duzu container
, popover-aren HTML elementu horren ordez ager dadin.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Adibidea
<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>
Lau norabide
Lau aukera daude eskuragarri: goiko, eskuineko, beheko eta ezkerreko lerrokatuta.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
Baztertu hurrengo klikan
Erabili focus
abiarazlea popover-ak baztertzeko, erabiltzaileak etengailuaren elementua ez den beste elementu batean egin duen hurrengo klikan.
Markatu zehatza behar da hurrengo klik egitean baztertzeko
Arakatzaile eta plataforma anitzeko portaera egokia izateko, <a>
etiketa erabili behar duzu, ez etiketa<button>
, eta tabindex
atributu bat ere sartu behar duzu.
<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>
$('.popover-dismiss').popover({
trigger: 'focus'
})
Desgaitutako elementuak
Atributua duten elementuak disabled
ez dira interaktiboak, hau da, erabiltzaileek ezin dituzte pasa edo klikatu popover bat (edo tresna-informazioa) abiarazteko. Konponbide gisa, popover-a abiarazi nahi duzu bilgarri batetik <div>
edo eta desgaitutako elementua <span>
gainidatzi nahi duzu.pointer-events
Desgaitutako popover abiarazleetarako, baliteke data-trigger="hover"
popover-a zure erabiltzaileei berehalako iritzi bisual gisa agertzea, baliteke desgaitutako elementu batean klik egitea espero ez dutelako.
<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>
Erabilera
Gaitu popover-ak JavaScript bidez:
$('#example').popover(options)
GPU azelerazioa
Popovers batzuetan lausoak agertzen dira Windows 10 gailuetan, GPU azelerazioa eta sistema aldatutako DPI bat dela eta. Honetarako konponbidea v4-n GPU azelerazioa desgaitzea da zure popover-etan behar den moduan.
Iradokitako konponketa:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Popover-ek teklatuaren eta laguntza-teknologien erabiltzaileentzat funtzionatzea
Teklatuko erabiltzaileek zure popover-ak aktibatzeko aukera izan dezaten, ohiko teklatuan fokua eta interaktiboak diren HTML elementuetan soilik gehitu behar dituzu (adibidez, estekak edo inprimaki-kontrolak). Nahiz eta HTML elementu arbitrarioak (adibidez, <span>
s) foka daitezkeen atributua gehituz tabindex="0"
, horrek tabulazio gogaikarri eta nahasgarriak gehituko ditu teklatuaren erabiltzaileentzako elementu ez-interaktiboetan, eta gaur egun laguntza-teknologia gehienek ez dute popover-aren edukia iragartzen egoera honetan. . Gainera, ez zaitez bakarrik fidatu hover
zure popover-en abiarazle gisa, teklatuaren erabiltzaileek aktibatzea ezinezkoa izango baita.
Aukera honekin HTML aberatsa eta egituratua txerta dezakezun arren, html
gehiegizko edukia gehitzea saihestea gomendatzen dizugu. Une honetan popover-ek funtzionatzen duten modua da, behin bistaratu ondoren, haien edukia abiarazle-elementuari lotzen zaiola aria-describedby
atributuarekin. Ondorioz, popover-aren eduki osoa jakinaraziko zaie laguntza-teknologien erabiltzaileei etenik gabeko korronte luze gisa.
Gainera, zure popover-ean kontrol interaktiboak (adibidez, inprimaki-elementuak edo estekak) ere sar daitezkeen arren (elementu horiek gehituz whiteList
edo baimendutako atributu eta etiketei), kontuan izan une honetan popover-ak ez duela kudeatzen teklatuaren foku-ordena. Teklatu-erabiltzaile batek popover bat irekitzen duenean, fokua abiarazteko elementuan geratzen da, eta popover-ak normalean dokumentuaren egituran abiarazlea berehala jarraitzen ez duenez, ez dago bermatzen aurrera/sakatzea.TABteklatuaren erabiltzaile bat popover-era eramango du. Laburbilduz, popover batean kontrol interaktiboak gehitzeak litekeena da kontrol horiek eskuraezinak edo erabilezinak izatea teklatuaren erabiltzaileentzat eta laguntza-teknologien erabiltzaileentzat, edo, gutxienez, fokatze-ordena orokor ilogikoa izatea. Kasu hauetan, kontuan hartu elkarrizketa modal bat erabiltzea ordez.
Aukerak
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-animation=""
.
sanitize
,
sanitizeFn
eta
whiteList
aukerak ezin direla eman datu-atributuak erabiliz.
Izena | Mota | Lehenetsia | Deskribapena |
---|---|---|---|
animazioa | boolearra | egia | Aplikatu CSS desagertzeko trantsizioa popover-ari |
edukiontzi | katea | elementua | faltsua | faltsua | Popover elementu zehatz bati eransten dio. Adibidea |
edukia | katea | elementua | funtzioa | '' | Edukien balio lehenetsia
|
atzerapena | zenbakia | objektua | 0 | Atzeratu popover-a erakusteko eta ezkutatzeko (ms) - ez dagokio eskuzko abiarazle motari Zenbaki bat ematen bada, atzerapena aplikatuko da ezkutatzeko/erakusteko Objektuaren egitura hau da: |
html | boolearra | faltsua | Sartu HTML popover-ean. Faltsua bada, jQuery-ren text metodoa erabiliko da edukia DOMean txertatzeko. Erabili testua XSS erasoekin kezkatuta bazaude. |
Kokapen | katea | funtzioa | 'zuzen' | Popover-a nola kokatu - auto | goian | behea | ezkerra | eskubidea. Zehazten Funtzio bat kokapena zehazteko erabiltzen denean, popover DOM nodoa lehen argumentu gisa deitzen da eta abiarazte elementua DOM nodoa bigarren gisa. |
hautatzailea | katea | faltsua | faltsua | Hautatzailea ematen bada, popover objektuak zehaztutako helburuetara delegatuko dira. Praktikan, HTML eduki dinamikoa gaitzeko erabiltzen da popovers gehitzeko. Ikusi hau eta adibide informatzaile bat . |
txantiloia | katea | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Oinarrizko HTML popover-a sortzean erabiltzeko. Popover- Popover-
Kanpoko bilgarri-elementuak |
Izenburua | katea | elementua | funtzioa | '' | Izenburuaren balio lehenetsia
|
trigger | katea | 'klik' | Nola abiarazten den popover-a - egin klik | pasatzea | fokua | eskuliburua. Hainbat abiarazle pasa ditzakezu; bereiz itzazu tarte batekin. manual ezin da beste edozein eragilerekin konbinatu. |
desplazamendu | zenbakia | katea | 0 | Popover-aren desplazamendua bere xedearekiko. Informazio gehiago lortzeko, ikusi Popper-en offset docs . |
erorketaKokapena | katea | array | 'irauli' | Baimendu Popperrek atzerabidean zein posizio erabiliko duen zehaztea. Informazio gehiagorako, jo Popperren portaera dokumentuetara |
CustomClass | katea | funtzioa | '' | Gehitu klaseak popover-era erakusten denean. Kontuan izan klase hauek txantiloian zehaztutako klaseez gain gehituko direla. Hainbat klase gehitzeko, bereiz itzazu zuriuneekin: Klase-izen gehigarriak dituen kate bakarra itzuli beharko lukeen funtzio bat ere pasa dezakezu. |
muga | katea | elementua | 'ScrollParent' | Popover-aren gainezka-murriztapenaren muga. 'viewport' , 'window' , 'scrollParent' , edo HTMLElement erreferentzia baten balioak onartzen ditu (JavaScript soilik). Informazio gehiago lortzeko, ikusi Popperren preventOverflow docs . |
saneatu | boolearra | egia | Gaitu edo desgaitu desinfekzioa. Aktibatzen bada 'template' , 'content' eta 'title' aukerak garbituko dira. Ikusi desinfektatzaileen atala gure JavaScript dokumentazioan . |
Zerrenda zuria | objektua | Balio lehenetsia | Baimendutako atributuak eta etiketak dituen objektua |
sanitizeFn | nulua | funtzioa | nulua | Hemen zure higienizazio funtzioa horni dezakezu. Hau erabilgarria izan daiteke garbiketa egiteko liburutegi dedikatu bat erabili nahi baduzu. |
popperConfig | nulua | objektua | nulua | Bootstrap-en Popper konfigurazio lehenetsia aldatzeko, ikusi Popper-en konfigurazioa |
Popover indibidualentzako datu-atributuak
Popover indibidualetarako aukerak bestela datu-atributuak erabiliz zehaztu daitezke, goian azaldu bezala.
Metodoak
Metodo asinkronoak eta trantsizioak
API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .
Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .
$().popover(options)
Elementu bilduma baterako popover-ak hasieratzen ditu.
.popover('show')
Elementu baten popover-a agerian uzten du. Deitzen duenari itzultzen zaio popover-a benetan erakutsi aurretik (hau da, shown.bs.popover
gertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztetzat hartzen da. Izenburua eta edukia zero-luzera duten popover-ak ez dira inoiz bistaratzen.
$('#element').popover('show')
.popover('hide')
Elementu baten popover-a ezkutatzen du. Popover-a benetan ezkutatu aurretik (hau da, hidden.bs.popover
gertaera gertatu baino lehen) itzultzen da deitzaileari. Hau popover-aren "eskuz" abiaraztetzat hartzen da.
$('#element').popover('hide')
.popover('toggle')
Elementu baten popover-a aktibatzen du. Deitzen duenari itzultzen zaio popover-a benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.popover
edo hidden.bs.popover
gertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztetzat hartzen da.
$('#element').popover('toggle')
.popover('dispose')
Elementu baten popover-a ezkutatu eta suntsitzen du. Ordezkapena erabiltzen duten popover -ak ( selector
aukera erabiliz sortzen direnak ) ezin dira banan-banan suntsitu ondorengo abiarazle-elementuetan.
$('#element').popover('dispose')
.popover('enable')
Elementu baten popover-a erakusteko gaitasuna ematen dio. Popover-ak lehenespenez gaituta daude.
$('#element').popover('enable')
.popover('disable')
Elementu baten popover-a erakusteko gaitasuna kentzen du. Popover-a berriro gaituta badago soilik erakutsi ahal izango da.
$('#element').popover('disable')
.popover('toggleEnabled')
Elementu baten popover-a erakusteko edo ezkutatzeko gaitasuna aldatzen du.
$('#element').popover('toggleEnabled')
.popover('update')
Elementu baten popover-aren posizioa eguneratzen du.
$('#element').popover('update')
Gertaerak
Gertaera mota | Deskribapena |
---|---|
show.bs.popover | Gertaera hau berehala abiarazten da show instantzia-metodoa deitzen denean. |
erakutsi.bs.popover | Gertaera hau abiarazten da popover-a erabiltzailearentzat ikusgai jartzen denean (CSS trantsizioak amaitu arte itxarongo da). |
ezkutatu.bs.popover | Gertaera hau berehala abiarazten da hide instantzia-metodoa deitzen denean. |
ezkutuan.bs.popover | Gertaera hau abiarazten da popover-a erabiltzaileari ezkutatzen amaitzen denean (CSS trantsizioak amaitu arte itxarongo da). |
txertatuta.bs.popover | Gertaera hau gertaeraren ondoren show.bs.popover abiarazten da popover txantiloia DOM-era gehitu denean. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})