SourceUmi desplegable rehegua
Embohasa umi ñembojehe’a contextual rehegua ehechauka hag̃ua umi lista enlace ha hetave mba’e Bootstrap plugin desplegable reheve.
Umi desplegable ha’e toggleable, contextual superposición ojehechauka hag̃ua umi lista enlace rehegua ha hetave mba’e. Ojejapo hikuái interactivo pe JavaScript plugin desplegable Bootstrap oikeva’ekue ndive. Oñembohasa hikuái clic rupive, ndaha’éi ojehoverávo; péva peteî decisión intencional diseño reheguáva.
Umi desplegable oñemopu’ã peteĩ aranduka’i mbohapýha rehe, Popper.js , ome’ẽva ñemohenda dinámico ha jehechaukaha jehechakuaa. Emoĩ katuete popper.min.js Bootstrap JavaScript mboyve térã eipuru bootstrap.bundle.min.js
/ bootstrap.bundle.js
oguerekóva Popper.js. Popper.js ndojeporúi oñemohenda hag̃ua umi desplegable navbar-pe jepémo noñeikotevẽiháicha ñemohenda dinámico.
Emopu’ãramo ore JavaScript ypykue guive, oikotevẽutil.js
.
Pe WAI ARIA jeporupyre odefini peteĩ role="menu"
widget añetegua , ha katu kóva haꞌehína específico umi menú aplicación-ichagua omoñepyrũva tembiapo térã tembiaporã. Umi menú ARIA rehegua ikatu oguereko umi mbaꞌe menú rehegua, umi menú vore vore rehegua, umi menú botón radio rehegua, umi aty radio botón rehegua ha umi submenú añoite.
Umi bootstrap mbaꞌekuaarã katu, ojejapo haꞌe hag̃ua genérico ha ojepurukuaa hag̃ua opaichagua situación ha estructura de marcado-pe. Techapyrã, ikatu ojejapo umi desplegable oguerekóva entrada adicional ha control formulario rehegua, haꞌeháicha umi tenda jeheka térã formulario jeikerã. Upévare, Bootstrap noha’arõi (ni omoĩ ijehegui) mba’eveichagua role
ha aria-
atributo oñeikotevẽva umi menú ARIA añeteguávape g̃uarã. Umi ohaíva oikeva’erã ijeheguiete ko’ã atributo específicovéva.
Ha katu, Bootstrap omoĩve pytyvõ oñemboguapýva hetavéva teclado menú ñembojoajurãme g̃uarã, haꞌeháicha ikatuha ojeguata .dropdown-item
elemento peteĩteĩva rupive ojeporúvo umi tecla cursor ha oñemboty menú ESC tecla reheve.
Embojere pe desplegable toggle (nde botón térã enlace) ha menú desplegable ryepýpe .dropdown
, térã ambue elemento odeclaráva position: relative;
. Umi dropdown ikatu oñemboguata <a>
térã <button>
elemento-kuéragui oñemohenda porãve hag̃ua ne remikotevẽ potencial.
Oimeraẽ peteĩva .btn
ikatu oñembohasa peteĩ toggle desplegable-pe peteĩ marca ñemoambue reheve. Ko’ápe ojehechauka mba’éichapa ikatu remoĩ omba’apo hag̃ua peteĩva umi <button>
elemento ndive:
Kopia
<div class= "dropdown" >
<button class= "btn btn-secondary dropdown-toggle" type= "button" id= "dropdownMenuButton" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown button
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuButton" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
Ha umi <a>
elemento reheve:
Kopia
<div class= "dropdown" >
<a class= "btn btn-secondary dropdown-toggle" href= "#" role= "button" id= "dropdownMenuLink" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown link
</a>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuLink" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
Pe iporãvéva ha’e ikatuha rejapo kóva oimeraẽva botón variante reheve, avei:
Tenondeguáva
Mokõiha
Ñesẽporã
Info
Ñemongyhyje
Ñemongyhyje
Kopia
<!-- Example single danger button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Action
</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
Upéicha avei, ejapo umi desplegable botón dividido orekóva prácticamente peteĩchagua marcado umi desplegable botón peteĩva ndive, ha katu oñembojoapývo .dropdown-toggle-split
espaciado hekopete caret desplegable jerére.
Jaipuru ko clase extra ñamboguejy hag̃ua horizontal padding
mokõive lado caret-pe 25% ha jaipeꞌa pe margin-left
that’s oñembojoapýva umi botón desplegable regular-pe g̃uarã. Umi cambio extra omantene pe caret oñecentra pe botón split-pe ha ome’ẽ peteĩ área de golpe tamaño adecuadovéva pe botón principal ykére.
Tenondeguáva
Toggle Ñemboguejyha
Mokõiha
Toggle Ñemboguejyha
Ñesẽporã
Toggle Ñemboguejyha
Info
Toggle Ñemboguejyha
Ñemongyhyje
Toggle Ñemboguejyha
Ñemongyhyje
Toggle Ñemboguejyha
Kopia
<!-- Example split danger button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger" > Action</button>
<button type= "button" class= "btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
Umi botón desplegable ombaꞌapo umi botón opaichagua tuichakue ndive, umíva apytépe umi botón desplegable por defecto ha dividido.
Kopia
<!-- Large button groups (default and split) -->
<div class= "btn-group" >
<button class= "btn btn-secondary btn-lg dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Large button
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
<div class= "btn-group" >
<button class= "btn btn-secondary btn-lg" type= "button" >
Large split button
</button>
<button type= "button" class= "btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class= "btn-group" >
<button class= "btn btn-secondary btn-sm dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Small button
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
<div class= "btn-group" >
<button class= "btn btn-secondary btn-sm" type= "button" >
Small split button
</button>
<button type= "button" class= "btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
Emoñepyrũ umi menú desplegable elementokuéra ári emoĩvo .dropup
elemento túvape.
Dropup rehegua
Split gota rehegua
Toggle Ñemboguejyha
Kopia
<!-- Default dropup button -->
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropup
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropup button -->
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-secondary" >
Split dropup
</button>
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
Emoñepyrũ umi menú desplegable umi elemento akatúape emoĩvo .dropright
elemento túvape.
Gota rehegua
Oñemboja’o dropright rehegua
Ombohasa Dropright-pe
Kopia
<!-- Default dropright button -->
<div class= "btn-group dropright" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropright
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class= "btn-group dropright" >
<button type= "button" class= "btn btn-secondary" >
Split dropright
</button>
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropright</span>
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
Emoñepyrũ umi menú desplegable umi elemento akatúape emoĩvo .dropleft
elemento túvape.
Gota rehegua
Ombohasa Dropleft rehegua
Ojedividi gota izquierda gotyo
Kopia
<!-- Default dropleft button -->
<div class= "btn-group dropleft" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropleft
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class= "btn-group" >
<div class= "btn-group dropleft" role= "group" >
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropleft</span>
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<button type= "button" class= "btn btn-secondary" >
Split dropleft
</button>
</div>
Históricamente umi menú desplegable contenido ha’eva’erãkuri enlace, ha katu ndaha’evéima upéicha v4-pe. Koꞌág̃a ikatu reipuru opcionalmente umi <button>
elemento nde desplegable-pe <a>
s-nte rangue.
Kopia
<div class= "dropdown" >
<button class= "btn btn-secondary dropdown-toggle" type= "button" id= "dropdownMenu2" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenu2" >
<button class= "dropdown-item" type= "button" > Action</button>
<button class= "dropdown-item" type= "button" > Another action</button>
<button class= "dropdown-item" type= "button" > Something else here</button>
</div>
</div>
Ikatu avei ejapo umi mba’e’oka ndaha’éiva interactivo .dropdown-item-text
. Eñeñandu líbre emoĩve hag̃ua estilo CSS térã jehaipyre purupyrã jeporupyre reheve.
Kopia
<div class= "dropdown-menu" >
<span class= "dropdown-item-text" > Dropdown item text</span>
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
Emoĩve .active
umi mbaꞌe oĩva pe desplegable-pe emoĩ hag̃ua estilo activo ramo .
Kopia
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Regular link</a>
<a class= "dropdown-item active" href= "#" > Active link</a>
<a class= "dropdown-item" href= "#" > Another link</a>
</div>
Emoĩve .disabled
umi mba’e’oka oĩva vore’ípe emoĩ hag̃ua estilo oñemboykéva ramo .
Kopia
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Regular link</a>
<a class= "dropdown-item disabled" href= "#" > Disabled link</a>
<a class= "dropdown-item" href= "#" > Another link</a>
</div>
Por defecto, peteĩ menú desplegable oñemohenda ijeheguiete 100% yvate guive ha ituvakuéra akatúa gotyo. Emoĩ .dropdown-menu-right
peteĩ .dropdown-menu
a derecha gotyo emohenda pe menú desplegable.
¡Akã yvate! Umi desplegable oñemohenda Popper.js rupive (ndahaꞌeiramo oĩ jave peteĩ navbar-pe).
Menú oñemohenda porãva akatúa gotyo
Kopia
<div class= "btn-group" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Right-aligned menu
</button>
<div class= "dropdown-menu dropdown-menu-right" >
<button class= "dropdown-item" type= "button" > Action</button>
<button class= "dropdown-item" type= "button" > Another action</button>
<button class= "dropdown-item" type= "button" > Something else here</button>
</div>
</div>
Emoĩ peteĩ iñakãrapuꞌa emoĩ hag̃ua etiqueta umi tembiaporã vore oimeraẽva menú desplegable-pe.
Kopia
<div class= "dropdown-menu" >
<h6 class= "dropdown-header" > Dropdown header</h6>
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
</div>
Emboja’o umi aty umi elemento menú rehegua ojoajúva peteĩ divisor reheve.
Kopia
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
Emoĩ oimeraẽva jehaipyre forma libre peteĩ menú desplegable ryepýpe jehaipyre reheve ha eipuru umi utilidad espaciado rehegua . Eñamindu’u oiméne reikotevẽtaha estilo de tamaño adicional ejoko hag̃ua menú ipekue.
Kopia
<div class= "dropdown-menu p-4 text-muted" style= "max-width: 200px;" >
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class= "mb-0" >
And this is more example text.
</p>
</div>
Emoĩ peteĩ formulario peteĩ menú desplegable ryepýpe, térã ejapo peteĩ menú desplegable-pe, ha eipuru umi utilidad margen térã relleno rehegua eme’ẽ hag̃ua chupe espacio negativo reikotevẽva.
Kopia
<div class= "dropdown-menu" >
<form class= "px-4 py-3" >
<div class= "form-group" >
<label for= "exampleDropdownFormEmail1" > Email address</label>
<input type= "email" class= "form-control" id= "exampleDropdownFormEmail1" placeholder= "[email protected] " >
</div>
<div class= "form-group" >
<label for= "exampleDropdownFormPassword1" > Password</label>
<input type= "password" class= "form-control" id= "exampleDropdownFormPassword1" placeholder= "Password" >
</div>
<div class= "form-check" >
<input type= "checkbox" class= "form-check-input" id= "dropdownCheck" >
<label class= "form-check-label" for= "dropdownCheck" >
Remember me
</label>
</div>
<button type= "submit" class= "btn btn-primary" > Sign in</button>
</form>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > New around here? Sign up</a>
<a class= "dropdown-item" href= "#" > Forgot password?</a>
</div>
Kopia
<form class= "dropdown-menu p-4" >
<div class= "form-group" >
<label for= "exampleDropdownFormEmail2" > Email address</label>
<input type= "email" class= "form-control" id= "exampleDropdownFormEmail2" placeholder= "[email protected] " >
</div>
<div class= "form-group" >
<label for= "exampleDropdownFormPassword2" > Password</label>
<input type= "password" class= "form-control" id= "exampleDropdownFormPassword2" placeholder= "Password" >
</div>
<div class= "form-check" >
<input type= "checkbox" class= "form-check-input" id= "dropdownCheck2" >
<label class= "form-check-label" for= "dropdownCheck2" >
Remember me
</label>
</div>
<button type= "submit" class= "btn btn-primary" > Sign in</button>
</form>
Opciones desplegables rehegua
Eipuru data-offset
térã data-reference
emoambue hag̃ua moõpa oĩ pe desplegable.
Kopia
<div class= "d-flex" >
<div class= "dropdown mr-1" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" id= "dropdownMenuOffset" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" data-offset= "10,20" >
Offset
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuOffset" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
<div class= "btn-group" >
<button type= "button" class= "btn btn-secondary" > Reference</button>
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" id= "dropdownMenuReference" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" data-reference= "parent" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuReference" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
</div>
Atributo de datos térã JavaScript rupive, pe plugin desplegable omoambue contenido kañymby (menú desplegable) ombohasávo .show
clase elemento lista tuvakuéra rehegua. Pe data-toggle="dropdown"
atributo ojejerovia oñemboty hag̃ua menú desplegable peteĩ aplicación nivel-pe, upévare iporã reipuru meme hag̃ua.
Umi tembipuru oñembohapéva táctil-pe, ojepeꞌa peteĩ desplegable oñembojoapy ( $.noop
) mouseover
mboguatahára nandi umi <body>
elemento memby pyaꞌetevape. Ko hack admitidamente feo oñeikotevëva omba'apo haguã peteî quirk iOS' evento delegación , ambue mba'épe ojokóta peteî tap oimehápe okápe desplegable omoñepyrüva código ombotýva desplegable. Oñemboty rire pe desplegable, mouseover
ojeipe’a ko’ã manipulador vacío adicional.
Umi atributo de datos rupive
Emoĩ data-toggle="dropdown"
peteĩ enlace térã botón-pe emoambue hag̃ua peteĩ desplegable.
Kopia
<div class= "dropdown" >
<button id= "dLabel" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown trigger
</button>
<div class= "dropdown-menu" aria-labelledby= "dLabel" >
...
</div>
</div>
Ehenói umi desplegable JavaScript rupive:
Kopia
$ ( '.dropdown-toggle' ). dropdown ()
data-toggle="dropdown"
oñeikotevẽ gueteri
Taha’e ha’éva ehenóiva ne desplegable JavaScript rupive térã upéva rangue eipuru data-api, data-toggle="dropdown"
oñeikotevẽ akóinte oĩ presente pe desplegable elemento desencadenante-pe.
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-offset=""
.
Téra
Hesegua
Upevakuére
Techaukaha
desplazamiento rehegua
papapy | cadena rehegua | hembiapo
0 rehegua
Desplazamiento pe desplegable rehegua relativo pe meta orekóva rehe. Ojeikuaave hag̃ua ehecha Popper.js offset docs .
jere
booleano rehegua
teete
Eheja Dropdown ojere oikóramo peteĩ superposición elemento referencia rehegua. Ojeikuaave hag̃ua ehecha Popper.js flip docs .
límite rehegua
cadena rehegua | mba'e rehegua
'desplazamientoTúva'.
Límite restricción de desbordamiento rehegua menú desplegable rehegua. Omoneĩ umi mbaꞌekuaarã 'viewport'
, 'window'
, 'scrollParent'
, térã peteĩ HTMLElement ñembohekopyrã (JavaScript añoite). Ojeikuaave hag̃ua ehecha Popper.js kuatiahaipyre preventOverflow .
kuaukarã
cadena rehegua | mba'e rehegua
'toggle' rehegua.
Elemento de referencia menú desplegable rehegua. Omoneĩ umi mbaꞌekuaarã 'toggle'
, 'parent'
, térã peteĩ HTMLElement ñembohekopyrã. Ojeikuaave hag̃ua ehecha Popper.js referenceObject docs .
techaukahára
sã
'dinámico' rehegua.
Por defecto, jaipuru Popper.js ñemohenda dinámico-pe g̃uarã. Embogue ko mba’e static
.
Eñamindu’u boundary
oñemboguapy jave oimeraẽ mba’ekuaarã ambuévape ndaha’éiva , ojeporu 'scrollParent'
estilo mba’e’oka rehe.position: static
.dropdown
Tapereko
Techaukaha
$().dropdown('toggle')
Ombohasa menú desplegable peteĩ navbar térã navegación ficha oñemeꞌevaꞌekue rehegua.
$().dropdown('update')
Ombopyahu peteĩ elemento ñemboguejyha ñemohenda.
$().dropdown('dispose')
Ohundi peteĩ elemento desplegable.
Opaite mbaꞌe ojehúva desplegable oñembopu .dropdown-menu
's elemento túva rehe ha oguereko peteĩ relatedTarget
mbaꞌekuaarã, ivalór haꞌehína elemento anclaje oñembohasáva. hide.bs.dropdown
ha hidden.bs.dropdown
umi mbaꞌe ojehúva oguereko peteĩ clickEvent
mbaꞌekuaarã (pe mbaꞌe ojehúva ypykue tipo haꞌe jave añoite click
) oguerekóva peteĩ Objeto Evento rehegua pe mbaꞌe ojehúva clic-pe g̃uarã.
Jeguerohyha
Techaukaha
show.bs.dropdown
Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave método instancia ohechaukáva.
shown.bs.dropdown
Ko mba’e ojehúva oñembogue ojejapo rire ojehecha hag̃ua puruhárape (oha’arõta umi CSS jehaipyre, oñembotývo).
hide.bs.dropdown
Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe método instancia omokañyvaꞌekue.
hidden.bs.dropdown
Ko mba’e ojehúva oñembogue oñemokañypa rire pe desplegable puruháragui (oha’arõta CSS jehaipyre, oñembotývo).
Kopia
$ ( '#myDropdown' ). on ( 'show.bs.dropdown' , function () {
// do something…
})