Popovers rehegua
Kuatiahaipyre ha techapyrã emoĩ hag̃ua Bootstrap popovers, ojejuhúvaicha iOS-pe, oimeraẽ elemento nde tenda’ípe.
Tembiecharã
Mba’e ojekuaava’erã ojepuru jave popover plugin:
- Popovers ojepytaso biblioteca 3er partido Popper rehe oñemohenda haguã. Emoingeva’erã popper.min.js bootstrap.js mboyve térã eipuru
bootstrap.bundle.min.js
/bootstrap.bundle.js
oguerekóva Popper ikatu hag̃uáicha umi popover omba’apo! - Popovers oikotevẽ tembipuru’i ñemohendaha peteĩ dependencia ramo.
- Popovers ha’e opt-in por razones de rendimiento, upévare nde voi remoñepyrũva’erã .
- Cero-longitud
title
hacontent
valores araka'eve ndohechaukái peteî popover. - Emombeꞌu
container: 'body'
ani hag̃ua ojejapo apañuãi renderización rehegua umi componente ikomplikadovévape (ñande aty jeikerãicha, aty botón rehegua, ha mbaꞌe). - Omotenondévo popovers umi elemento kañymby rehe ndoikomo'ãi.
- Umi popovers
.disabled
térãdisabled
elemento-kuérape g̃uarã oñemboguapyvaꞌerã peteĩ elemento envoltura rehe. - Ojedispara jave umi ancla-gui ojejaho’íva heta línea ári, umi popover oñecentráta umi ancla ancho total mbytépe. Eipuru
.text-nowrap
nde<a>
s ári ani hagua oiko ko jepokuaa. - Umi popovers oñeñomiva'erã ojeipe'a mboyve DOM-gui umi elemento correspondiente orekóva.
- Umi popovers ikatu oñemboguata gracias peteĩ elemento oĩva peteĩ DOM sombra ryepýpe.
prefers-reduced-motion
consulta medio rehegua rehe. Ehecha pe
sección movimiento reducido ore kuatia accesibilidad rehegua .
Emoñe’ẽ meme rehecha haĝua mba’éichapa omba’apo umi popover algunos ejemplos reheve.
Techapyrã: Emboguata umi popover oparupiete
Peteĩ tape oñemboguapy hag̃ua opaite popover peteĩ página-pe haꞌeta ojeporavo hag̃ua data-bs-toggle
atributo rupive:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Techapyrã: Oipurúvo container
opción
Eguerekóramo peteĩ estilo peteĩ elemento túva rehe ojokóva peteĩ popover rehe, emombeꞌuse peteĩ jeporupyre container
ikatu hag̃uáicha popover HTML ojekuaa upe elemento ryepýpe hendaguépe.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Tembiecharã
<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>
Irundy dirección rehegua
Ojeguereko irundy opción: yvate, akatúa, yvy gotyo ha asu gotyo alineado. Umi dirección ojehechauka espejo-pe ojepuru jave Bootstrap RTL-pe.
<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>
Oñemboyke ambue clic-pe
Eipuru focus
gatillo emosẽ hag̃ua popovers puruhára clic oúvape peteĩ elemento iñambuéva elemento toggle-gui.
Oñeikotevẽ marcado específico oñemboyke-pe g̃uarã ambue clic-pe
Ojepokuaa porã hag̃ua kundahára ha plataforma kurusu, eipuruva’erã <a>
etiqueta, ndaha’éi etiqueta <button>
, ha avei emoĩva’erã peteĩ tabindex
atributo.
<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'
})
Umi elemento oñemboykéva
Umi elemento oguerekóva disabled
atributo ndaha’éi interactivo, he’iséva umi puruhára ndaikatuiha ojepyso térã ojepyso hesekuéra omoñepyrũ hag̃ua peteĩ popover (térã tembipuru’i ñe’ẽmondo). Peteĩ tembiaporãicha, emoñepyrũse pe popover peteĩ envoltura-gui <div>
térã <span>
, iporãvéva ojejapo teclado-pe oñembohapéva ojeporúvo tabindex="0"
.
Umi popover desencadenante oñemboykévape g̃uarã, ikatu avei reipotave ikatu hag̃uáicha pe popover ojehechauka pya’e jehechapyrãicha ne puruhárapedata-bs-trigger="hover focus"
ikatuháicha noha’arõi hikuái oity peteĩ elemento oñemboykéva rehe.
<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 rehegua
Variables rehegua
$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);
Jeporu rehegua
Emboguata popovers JavaScript rupive:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Ojapóvo umi popover ombaꞌapo hag̃ua umi teclado ha tecnología pytyvõhára puruhárape g̃uarã
Ojeheja hag̃ua teclado puruhárape omombaꞌapo ne popover-kuéra, emoĩvaꞌerãnte umi elemento HTML-pe, ymaite guive oñembohapéva teclado-pe ha oñembojoajúva (haꞌeháicha enlace térã control formulario rehegua). Jepémo umi elemento HTML arbitrario ( <span>
s-icha) ikatu ojejapo enfocables oñembojoapývo tabindex="0"
atributo, kóva omoĩta umi parada ficha potencialmente molesto ha confuso umi elemento ndahaꞌeiva interactivo rehe umi teclado puruhárape g̃uarã, ha hetavéva tecnología oipytyvõva koꞌág̃aite nomoherakuãi popover contenido ko situación-pe . Avei, ani rejerovia hese añoite hover
pe gatillo ramo ne popover-kuérape g̃uarã, kóva ojapótagui ndaikatumo’ãigui oñembohape umi teclado puruhárape g̃uarã.
Ikatu ramo jepe emoinge HTML rico ha estructurado umi popover-pe html
opción reheve, romomarandu mbarete ani hag̃ua remoĩ hetaiterei contenido. Mbaꞌeichaitépa ombaꞌapo umi popover koꞌág̃agua haꞌehína, ojehechauka rire, ikonteído oñembojoaju elemento disparador rehe aria-describedby
atributo reheve. Péicha resultado, opavave contenido popover oñemoherakuãta umi usuario tecnología asistida peteî corriente ipukúva, ininterrumpido.
Avei, ikatu ramo jepe avei emoinge umi control interactivo (ha’eháicha elemento forma térã enlace) nde popover-pe (emoĩvo ko’ã elemento umi allowList
atributo ha etiqueta ojehejávape), eikuaa ko’áĝa pe popover ndoisãmbyhýiha teclado enfoque orden. Peteĩ teclado puruhára oipeꞌa jave peteĩ popover, enfoque opyta elemento desencadenante rehe, ha jepiveguáicha pe popover ndosegíri pyaꞌete pe gatillo kuatia estructura-pe, ndaipóri garantía oñemotenondévo/oñembotapykuévoTABomomýita peteĩ teclado puruhára popover-pe voi. Mbykyhápe, oñembojoapýramo añoite umi control interactivo peteĩ popover-pe, oiméne ojapo ko’ã control ndojehupytýiva/ndojeporúiva umi teclado puruhára ha umi tecnología oipytyvõvape g̃uarã, térã por lo menos ojapo peteĩ orden de enfoque general ilógico. Ko’ã kásope, ehecha eipuru peteĩ ñe’ẽñemi modal hendaguépe.
Opciones rehegua
Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-bs-
, -peguáicha data-bs-animation=""
. Ejesareko emoambue hag̃ua káso tipo opción réra camelCase-gui kebab-case-pe embohasávo umi opción atributo de datos rupive. Techapyrã, eipuru rangue data-bs-customClass="beautifier"
, eipuru data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, ha
allowList
opción ndaikatúi oñeme’ẽ ojeporúvo umi atributo dato rehegua.
Téra | Hesegua | Upevakuére | Techaukaha |
---|---|---|---|
animation |
booleano rehegua | true |
Emoĩ peteĩ CSS descoloramiento ñembohasa popover-pe |
container |
cadena rehegua | elemento | japu | false |
Ombojoaju pe popover peteĩ elemento específico rehe. Tembiecharã: |
content |
cadena rehegua | elemento | hembiapo | '' |
Contenido valor por defecto Oñemeꞌeramo peteĩ función, oñehenóita |
delay |
papapy | mba'e | 0 |
Retraso ohechauka ha omokañy popover (ms) - ndojeporúi tipo de gatillo manual-pe Oñeme’ẽramo peteĩ papapy, ojejapo retardo mokõivévape kañy/jehechauka Objeto estructura ha’e: . |
html |
booleano rehegua | false |
Emoinge HTML pe popover-pe. Japúramo, innerText ojeporúta propiedad oñemoinge hag̃ua contenido DOM-pe. Eipuru jehaipyre rejepy’apýramo umi ataque XSS rehe. |
placement |
cadena rehegua | hembiapo | 'right' |
Mba'éichapa oñemohenda pe popover - auto | yvate | yvy gotyo | izquierda | akatúa. Ojepuru jave peteĩ tembiaporã ojekuaa hag̃ua ñemohenda, oñehenói nodo popover DOM reheve peteĩha argumento ramo ha elemento disparador nodo DOM mokõiha ramo. Pe |
selector |
cadena rehegua | japu | false |
Oñeme’ẽramo peteĩ jeporavoha, umi mba’e’oka popover rehegua oñeme’ẽta umi mba’e’oka oje’évape. En práctica, kóva ojepuru ikatu hag̃uáicha contenido HTML dinámico oguereko popovers oñembojoapýva. Ehecha kóva ha peteĩ techapyrã informativo . |
template |
sã | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML ojepuru hag̃ua ojejapo jave popover. Umi popover's Umi popover's
Pe elemento envoltura okápegua oguerekova era pe |
title |
cadena rehegua | elemento | hembiapo | '' |
Título valor por defecto Oñemeꞌeramo peteĩ función, oñehenóita |
trigger |
sã | 'click' |
Mba'éichapa oñemboguata popover - eity | hover rehegua | enfoque | popeguáva. Ikatu rembohasa heta disparador; omboja’o chupekuéra peteĩ espacio reheve. manual ndaikatúi oñembojoaju ambue gatillo ndive. |
fallbackPlacements |
matriz rehegua | ['top', 'right', 'bottom', 'left'] |
Emohenda umi ñemohenda jere rehegua eme’ẽvo peteĩ lista ñemohenda rehegua matriz-pe (orden de preferencia-pe). Ojeikuaave hag̃ua ehecha Popper rekoha docs |
boundary |
cadena rehegua | mba'e rehegua | 'clippingParents' |
Límite restricción de desbordamiento rehegua popover rehegua (ojeporu Popper modificador preventOverflow-pe añoite). Por defecto ha’e 'clippingParents' ha ikatu omoneĩ peteĩ HTMLElement ñe’ẽmondo (JavaScript rupive añoite). Ojeikuaave hag̃ua ehecha Popper detectOverflow docs . |
customClass |
cadena rehegua | hembiapo | '' |
Oñemoĩve clasekuéra pe popover-pe ojehechauka jave. Ñañamindu’u ko’ã mbo’esyry oñembojoapýta oimeraẽ mbo’esyry oje’éva plantilla-pe ári. Oñemoĩ hag̃ua heta mbo’esyry, ojesepara va’erã espacio reheve: Ikatu avei embohasa peteĩ tembiaporã ombojevyvaꞌerãva peteĩ cadena añoite oguerekóva mboꞌepy réra ambuéva. |
sanitize |
booleano rehegua | true |
Emboguata térã embogue pe saneamiento. Ojeactiva ramo 'template' , 'content' ha 'title' opciones oñesantifika va'erã. Ehecha pe sección desinfectante ore kuatiañe’ẽ JavaScript-pe . |
allowList |
mba'e | Valor por defecto rehegua | Objeto oguerekóva atributo ha etiqueta ojehejáva |
sanitizeFn |
nulo rehegua | hembiapo | null |
Ko'ápe ikatu reabastece nde función de desinfectación nde propia. Kóva ikatu ideprovécho reiporusevéramo peteĩ biblioteca dedicada rejapo hag̃ua desinfecto. |
offset |
matriz | cadena rehegua | hembiapo | [0, 8] |
Compensación del popover relativo orekóva meta rehe. Ikatu embohasa peteĩ cadena umi atributo dato rehegua orekóva valor ojeseparáva coma-gui haꞌeháicha: Ojepuru jave peteĩ función ojekuaa hag̃ua desplazamiento, oñehenói peteĩ mbaꞌe reheve oguerekóva popper ñemohenda, referencia ha popper rects peteĩha argumento ramo. Pe elemento desencadenante nodo DOM oñembohasa mokõiha argumento ramo. Pe función ombojevyvaꞌerã peteĩ matriz oguerekóva mokõi papapy: . Ojeikuaave hag̃ua ehecha Popper offset docs . |
popperConfig |
nulo rehegua | mba'e | hembiapo | null |
Oñemoambue hag̃ua Bootstrap Popper ñemboheko tee, ehecha Popper ñemboheko . Ojepuru jave peteĩ tembiaporã ojejapo hag̃ua Popper ñemboheko, oñehenói peteĩ mbaꞌe reheve oguerekóva Bootstrap Popper ñemboheko tee. Oipytyvõ eipuru ha embojoaju hag̃ua pe ñepyrũrã ne ñemboheko tee ndive. Pe tembiaporã ombojevyva’erã peteĩ mba’e’oka configuración rehegua Popper-pe g̃uarã. |
Umi atributo de datos umi popover individual-pe g̃uarã
Umi opción umi popover individual-pe g̃uarã ikatu alternativamente ojehechauka ojeporúvo umi atributo de datos, oñemyesakã haguéicha yvateve.
Oipurúvo función orekóvapopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Método-kuéra rehegua
Método ha transición asíncrono rehegua
Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .
hechauka
Oikuaauka peteî elemento popover. Ojevy ohenóivape ojehechauka mboyve añetehápe popover (heꞌiséva oiko mboyve pe shown.bs.popover
mbaꞌe ojehúva). Péva ojehecha peteî “manual” desencadenante popover rehe. Umi popovers orekóva título ha contenido mokõivéva cero ipukukue araka'eve ndojehechaukái.
myPopover.show()
mongañy
Oñomi peteĩ elemento popover rehegua. Ojevy ohenóivape oñeñomi mboyve añetehápe pe popover (heꞌiséva oiko mboyve pe hidden.bs.popover
mbaꞌe ojehúva). Péva ojehecha peteî “manual” desencadenante popover rehe.
myPopover.hide()
toggle rehegua
Ombohasa peteĩ elemento popover. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe pe popover (heꞌiséva oiko mboyve pe shown.bs.popover
térã hidden.bs.popover
mbaꞌe ojehúva). Péva ojehecha peteî “manual” desencadenante popover rehe.
myPopover.toggle()
omboyke haguã
Oñomi ha ohundi peteĩ elemento popover (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe). Umi popovers oipurúva delegación (ojejapóva ojeporúvo opciónselector
) ndaikatúi oñehundi peteĩteĩ umi elemento disparador descendiente rehe .
myPopover.dispose()
mbopu'aka
Ome'ê peteî elemento popover-pe ikatuha ojehechauka. Popovers oñembohapéva por defecto.
myPopover.enable()
mbogue
Oipeꞌa ikatuha ojehechauka hag̃ua peteĩ elemento popover. Pe popover ikatúta ojehechauka oñembohape jeýramo añoite.
myPopover.disable()
toggleOjejapokuaa
Ombohasa mbaꞌekuaarã peteĩ elemento popover ojehechauka térã oñeñomi hag̃ua.
myPopover.toggleEnabled()
mbopyahu
Ombopyahu peteĩ elemento popover ñemohenda.
myPopover.update()
ohupytyInstancia
Método estático ohejáva ndéve rehupyty hag̃ua instancia popover ojoajúva peteĩ elemento DOM rehe
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
ohupytyTérãEjapoInstancia
Método estático ohejáva ndéve rehupyty instancia popover ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu en caso noñemoñepyrũi
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Umi mba’e oikóva
Tipo de evento rehegua | Techaukaha |
---|---|
ohechauka.bs.popover rehegua | Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave show método instancia rehegua. |
ojehechauka.bs.mboriahu | Ko mba’e ojehúva oñembogue ojejapo rire ojehecha hag̃ua puruhárape (oha’arõta oñembotývo umi CSS jehasaha). |
omokañy.bs.mboriahu | Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hide método instancia rehegua. |
kañymby.bs.mboriahu | Ko mba’e’oka oñembogue pe popover oñemokañypa rire puruháragui (oha’arõta CSS jehaipyre oñembotývo). |
omoinge.bs.mboriahu | Ko mbaꞌe ojehúva oñemboyke pe show.bs.popover mbaꞌe ojehúva rire oñembojoapývo popover plantilla DOM-pe. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})