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.
- Emopu’ãramo ore JavaScript ypykue guive, oikotevẽ
util.js
. - 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-toggle
atributo rupive:
$(function () {
$('[data-toggle="popover"]').popover()
})
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.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Tembiecharã
<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>
Irundy dirección rehegua
Ojeguereko irundy opción: yvate, akatúa, yvy gotyo ha asu gotyo alineado.
<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>
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-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'
})
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>
ha embogue pe pointer-events
elemento oñemboykéva ári.
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-trigger="hover"
ikatuháicha noha’arõi hikuái oity peteĩ elemento oñemboykéva rehe.
<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>
Jeporu rehegua
Emboguata popovers JavaScript rupive:
$('#example').popover(options)
GPU ñembopya’e
Umi popovers sapyꞌante ojehechauka oñembotapykue umi tembipuru Windows 10-pe GPU oñembopyaꞌe rupi ha peteĩ DPI sistema rehegua oñemoambuégui. Pe mba’e’apopyrã kóvape g̃uarã v4-pe ha’e embogue GPU ñembopya’e oñeikotevẽháicha nde popovers-pe.
Oñemoñe’ẽva’ekue ñemyatyrõ:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
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 whiteList
atributo ha etiqueta térã 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-
, -peguáicha data-animation=""
.
sanitize
,
sanitizeFn
ha
ojeporúvo umi atributo dato rehegua.whiteList
Téra | Hesegua | Upevakuére | Techaukaha |
---|---|---|---|
animación rehegua | booleano rehegua | teete | Emoĩ peteĩ CSS descoloramiento ñembohasa popover-pe |
mba’yru rehegua | cadena rehegua | elemento | japu | japu | Ombojoaju pe popover peteĩ elemento específico rehe. Tembiecharã: |
pypegua | cadena rehegua | elemento | hembiapo | '' . | Contenido valor por defecto Oñemeꞌeramo peteĩ función, oñehenóita |
mbegue | papapy | mba'e | 0 rehegua | 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 rehegua | booleano rehegua | japu | Emoinge HTML pe popover-pe. Japúramo, jQuery rembiaporã text ojeporúta oñemoinge hag̃ua mbaꞌekuaarã DOM-pe. Eipuru jehaipyre rejepy’apýramo umi ataque XSS rehe. |
colocación rehegua | cadena rehegua | hembiapo | 'akatúa' | 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 rehegua | cadena rehegua | japu | japu | 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 . |
plantilla rehegua | sã | '<div class="popover" role="tooltip"><div class="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 |
myakãha | cadena rehegua | elemento | hembiapo | '' . | Título valor por defecto Oñemeꞌeramo peteĩ función, oñehenóita |
ñembokapu | sã | 'emboguejy'. | 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. |
desplazamiento rehegua | papapy | sã | 0 rehegua | Compensación del popover relativo orekóva meta rehe. Ojeikuaave hag̃ua ehecha Popper offset docs . |
fallbackOñemohenda | cadena rehegua | matriz rehegua | 'jere' | Eheja emombe’u mba’e tendapa oipurúta Popper fallback-pe. Ojeikuaave hag̃ua ehecha Popper rekoha docs |
CustomClase rehegua | 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. |
límite rehegua | cadena rehegua | mba'e rehegua | 'desplazamientoTúva'. | Desbordamiento restricción límite del popover rehegua. Omoneĩ umi mbaꞌekuaarã 'viewport' , 'window' , 'scrollParent' , térã peteĩ HTMLElement ñembohekopyrã (JavaScript añoite). Ojeikuaave hag̃ua ehecha Popper preventOverflow kuatiañe’ẽ . |
desanizamiento rehegua | booleano rehegua | teete | 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 . |
Lista blanca rehegua | mba'e | Valor por defecto rehegua | Objeto oguerekóva atributo ha etiqueta ojehejáva |
sanitizarFn rehegua | nulo rehegua | hembiapo | mba'evegua | 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. |
popperConfig rehegua | nulo rehegua | mba'e | mba'evegua | Oñemoambue hag̃ua Bootstrap Popper ñemboheko tee, ehecha Popper ñemboheko |
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.
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 .
$().popover(options)
Omoñepyrũ umi popover peteĩ elemento ñembyatyrã.
.popover('show')
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.
$('#element').popover('show')
.popover('hide')
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.
$('#element').popover('hide')
.popover('toggle')
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.
$('#element').popover('toggle')
.popover('dispose')
Oñomi ha ohundi peteî elemento popover. Popovers oiporúva delegación (oñemoheñóiva oiporúvo opciónselector
) ndaikatúi oñehundi peteĩteĩ umi elemento disparador descendiente rehe .
$('#element').popover('dispose')
.popover('enable')
Ome'ê peteî elemento popover-pe ikatuha ojehechauka.Popovers oñembohapéva por defecto.
$('#element').popover('enable')
.popover('disable')
Oipeꞌa ikatuha ojehechauka hag̃ua peteĩ elemento popover. Pe popover ikatúta ojehechauka oñembohape jeýramo añoite.
$('#element').popover('disable')
.popover('toggleEnabled')
Ombohasa mbaꞌekuaarã peteĩ elemento popover ojehechauka térã oñeñomi hag̃ua.
$('#element').popover('toggleEnabled')
.popover('update')
Ombopyahu peteĩ elemento popover ñemohenda.
$('#element').popover('update')
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. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})