Urmachiykuna
Contextual llanthukunata tikray t'inkikuna listakuna rikuchinapaq chaymanta aswan Bootstrap urayk'aq plugin kaqwan.
Hatun qhawariy
Urmachiykuna tikranapaq kanku, contextual llanthukuna t'inkikuna listakuna rikuchinapaq chaymanta aswan. Paykunaqa ruwasqa kanku interactivo kaqwan chaymanta Bootstrap urayk'aq JavaScript plugin kaqwan. Paykunaqa ñit’ispa t’ikrakunku, manataq kuyurichispachu; kayqa huk decisión intencional de diseño nisqa .
Urmachiykuna huk kimsa kaq biblioteca kaqpi ruwasqa kanku, Popper , mayqinchus kallpasapa churayta chaymanta qhaway punku tariyta qun. Aswan allinta popper.min.js kaqmanta churay manaraq Bootstrap JavaScript kaqmanta utaq bootstrap.bundle.min.js
/ llamk'achiy bootstrap.bundle.js
mayqinchus Popper kaqwan kachkan. Popper mana llamk'achkanchu urquykunata navbars kaqpi churanapaq ichaqa imaynachus dinamico churay mana mañasqachu.
Sichus JavaScriptniykumanta pukyuta ruwachkanki, chayta munanutil.js
.
Accesibilidad nisqa
WAI ARIA kamachiy huk chiqa widget kaqmanta riqsichin , ichaqa kayqa ruwana-hina menúkuna ruwanapaq específico kaq mayqinkunachus ruwaykunata utaq ruwanakunata llamk'achinku. ARIA menúkuna menú elementokuna, cuadro de comprobación menú elementokuna, radio botón menú elementokuna, radio botón qutukuna chaymanta huch'uy menúkunalla kanman.role="menu"
Bootstrap kaqpa uraykachiyninkuna, wak ladumanta, ruwasqa kanku genérico kanankupaq chaymanta imaymana situacionkunaman chaymanta marka estructurakunaman ruwanapaq. Ejemplopaq, atikunmi ruwayta urayk'aqkuna mayqinkunachus yapa yaykuykunayuq chaymanta formulario kamachiykunayuq, maskana pampakuna utaq yaykuy formulariokuna hina. Kayrayku, Bootstrap mana suyanchu (nitaq kikinmanta yapanchu) mayqin role
chaymanta aria-
atributokuna chiqa ARIA menúkunapaq mañasqa. Qillqaqkuna kikinku kay aswan específico atributokunata churananku kanqa.
Ichaqa, Bootstrap ruwasqa yanapakuyta yapan aswan estándar teclado menú tinkiykuna kaqpaq, kayhina sapalla .dropdown-item
elementokuna kuyuy atiy kay cursor llavekuna llamk'achispa chaymanta menú ESCllavewan wichq'ay.
Ejemplos
Uraykaqpa tikrayninta (botonniyki utaq t'inkiyki) chaymanta urayk'aq menú ukhupi .dropdown
, utaq huk elemento willaq position: relative;
. Dropdowns kaqmanta <a>
utaq <button>
elementokunamanta llamk'achisqa kanman aswan allinta tupananpaq atikuq necesidadniykiman.
Huklla botón
Ima .btn
sapallapas huk urayk'aq tikrayman tikray atikun wakin marka tikraykunawan. Kaypi imaynatachus mayqin <button>
elementokunawanpas llamk'achiyta atinki:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</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>
</div>
Y con <a>
elementos:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<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>
</div>
Aswan allin kaqninqa kayta ruwayta atinki mayqin botón variante kaqwanpas, chaymanta:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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>
Botón rakiy
Kikillantataq, rakisqa botón urayk'aqkunata ruway yaqa kikin markawan huklla botón urayk'aqkunawan, ichaqa yapasqawan .dropdown-toggle-split
allin espaciamientopaq urayk'aq caret muyuriqpi.
Kay yapasqa claseta llamk'achiyku horizontalta padding
iskaynin lado caret kaqpi 25% pisiyachinaykupaq chaymanta chaymanta chay margin-left
yapasqa sapa kuti botón urayk'achiqkunapaq hurquyku. Chay yapasqa tikraykunaqa caretta rakisqa botón kaqpi chawpichasqata waqaychanku chaymanta huk aswan allin sayayniyuq tupachiy áreata qun hatun botón kaqpa ladunpi.
<!-- 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-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>
Tamaño
Botón urayk'achiqkuna tukuy sayayniyuq botones kaqwan llamk'anku, ñawpaqmanta chaymanta rakisqa urayk'aq botones kaqwan.
<!-- 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-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-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-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-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
Direcciones
Dropup
Tayta elementoman yapaspa elementokuna hawapi urayk'aq menúkunata .dropup
llamk'achiy.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Derecho de gota
Tayta elementoman yapaspa elementokunap paña larunpi urayk'aq menúkunata llamk'achiy .dropright
.
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Gota
Tayta elementoman yapaspa elementokunap lluq'inpi urayk'aq menúkunata llamk'achiy .dropleft
.
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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>
Artículos de menú
Históricamente urayk'aq menú contenidokuna t'inkikuna kanan karqan , ichaqa manaña chayhinachu v4 kaqwan. Kunanqa akllanamanta elementokunata llamk'achiyta atinki urayk'achiyniykikunapi s <button>
nisqallamanta ranti .<a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<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>
Mana tinkisqa urayk'achiqkunatapas ruwayta atinki .dropdown-item-text
. Mana manchakuspa aswan estilo ruwaypaq ruwasqa CSS utaq qillqa yanapakuykunawan.
<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>
Kawsaq
.active
Uraykachiypi kaq imakunaman yapay ruwasqa hina estilochanaykipaq .
<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>
Wañuchisqa
Mana atisqa hina estilochanaykipaq.disabled
urayk'achiqpi kaq imakunaman yapay .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Menú nisqa chiqanchay
Ñawpaqmanta, huk urayk'aq menú kikinmanta churasqa 100% patamanta chaymanta tayta-mamanpa paña ladonpi. Hukman yapay .dropdown-menu-right
pañaman .dropdown-menu
urayk’aq menú nisqapi chiqanchay.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>
Alineación respuesta
Sichus kutichiq chiqanchayta llamk'achiyta munanki, mana llamk'achiy dinámico churayta atributota yapaspa data-display="static"
chaymanta kutichiq variación clasekunata llamk'achiy.
Pañaman urayk'aq menúta qusqa rakiywan utaq aswan hatunwan tupachinaykipaq, yapay.dropdown-menu{-sm|-md|-lg|-xl}-right
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-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>
Lluq'i urayk'aq menú qusqa rakiywan utaq aswan hatunwan chiqanchanaykipaq, yapay .dropdown-menu-right
chaymanta .dropdown-menu{-sm|-md|-lg|-xl}-left
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<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>
Reparay mana huk data-display="static"
atributota yapanaykichu tiyan navbars kaqpi urayk'aq ñit'inakunaman, Popper mana navbars kaqpi llamk'achisqa kasqanrayku.
Contenido del menú
Umakuna
Ima urayk'aq menú kaqpipas ruwanakuna t'aqakunata etiquetananpaq huk umalliqta yapay.
<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>
Rakiqkuna
Huk rakiqwan tupaq menú nisqapi kaq huñukunata t'aqay.
<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>
Qillqa
Ima mana qullqiyuq qillqatapas huk urayk'aq menú ukhupi qillqawan churay chaymanta espaciamiento yanapakuykunata llamk'achiy . Reparay, yaqapaschá huk hatun sayay estilokunata necesitanki menú anchota hark'anaykipaq.
<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>
Formas
Huk formulariota huk urayk'aq menú ukhupi churay, utaq huk urayk'aq menú kaqman ruway, chaymanta margen utaq relleno yanapakuykunata llamk'achiy mana allin espaciota qunaykipaq munasqaykita.
<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-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</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>
<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-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Uraykaq akllanakuna
Chayta servichikuy data-offset
maypi data-reference
kasqanmanta cambianaykipaq.
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</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>
</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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<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>
</div>
Uso
Willay atributokuna utaq JavaScript kaqnintakama, urayk'aq plugin pakasqa willayta (urquq menúkuna) tikran .show
tayta kaqpi claseta tikraspa .dropdown-menu
. Atributo data-toggle="dropdown"
huk ruwana patapi urayk'aq menúkuna wichq'anapaq hapipakun, chayrayku allin yuyay sapa kuti llamk'achinapaq.
$.noop
)
hap'iqkuna elementopa mouseover
chaylla wawankunaman
yapan. <body>
Kay admitisqa millay hack necesario llamk'anapaq muyuriqpi huk
quirk kaqpi iOS' evento delegación , mayqinchus wakhina hark'anman huk grifo maypipas hawa urayk'aqmanta kay código llamk'achiyta chaymanta chay urayk'ayta wichq'an. Huk kuti urayk'achiq wichq'asqa kaqtin, kay yapasqa ch'usaq
mouseover
hap'iqkuna hurqusqa kanku.
Atributos de datos nisqawan
data-toggle="dropdown"
Huk t'inkiman utaq ñit'inaman yapay huk urayk'achiqta tikranaykipaq.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
JavaScript nisqawan
JavaScript nisqawan urayk'achiqkunata waqyay:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
kunankamapas mañasqaraqmi kachkan
Imayna kaptinpas sichus JavaScript kaqnintakama urayk'achisqayki waqyanki utaq aswanpas data-api kaqwan llamk'achkanki, data-toggle="dropdown"
sapa kuti urayk'aqpa elemento desencadenante kaqpi kanan tiyan.
Akllanakuna
Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-
, imaynachus data-offset=""
.
Suti | Niraq | Ñawpaqchasqa | Willay |
---|---|---|---|
offset nisqa | yupay | q'aytu | ruway | 0. | Desplazamiento de la desplegable relativo a su meta. Huk llamk'ayta t'inkisqata riqsinapaq llamk'achisqa kaptinqa, huk imayaywanmi waqyasqa, t'inkisqa willaykunata ñawpaq rimariynin hina. Rurayqa kikin rurasqa imayaytapas kutichinanmi. Chay elemento desencadenante DOM nodo iskay kaq argumento hina pasakun. Aswan willakuypaq qhaway Popperpa offset docs . |
kuyuchiy | boolean nisqa | chiqaq | Permitir Dropdown flip en caso de un superposición en el elemento de referencia. Aswan willakuypaq qhaway Popperpa flip docs . |
frontera | q'aytu | imakuna | 'scrollParent' nisqa. | Desbordamiento hark'ay frontera urayk'aq menú kaqmanta. 'viewport' , 'window' , 'scrollParent' , icha HTMLElement willaypa chanikunata chaskikun (JavaScriptlla). Aswan willakuypaq qhaway Popperpa preventOverflow qillqakuna . |
willakuy | q'aytu | imakuna | 'toggle' nisqa. | Elemento de referencia del menú desplegable nisqamanta. 'toggle' , 'parent' , icha HTMLElement nisqap chanikunata chaskikun . Aswan willakuypaq Popperpa referenceObject docs nisqapi qhaway . |
qawachiy | qaytu | 'dinámico' nisqa. | Ñawpaqmanta, Popper llamk'achiyku dinamico churaypaq. Kayta mana llamk'achiychu static . |
popperConfig nisqa | nullq | ima | chusaq | Bootstrap kaqpa ñawpaqmanta Popper wakichiyninta tikranaykipaq, Popperpa wakichiyninta qhaway |
Reparay mayk'aq boundary
huk chaniman churasqa kachkan mana 'scrollParent'
, estiloqa waqaychanaman position: static
churasqa .dropdown
.
Métodos
Imayna | Willay |
---|---|
$().dropdown('toggle') |
Huk qusqa navbar utaq tablayuq puriypa urayk'aq menú kaqninta tikran. |
$().dropdown('show') |
Huk qusqa navbar utaq tablayuq puriypa urayk'aq menú kaqninta rikuchin. |
$().dropdown('hide') |
Huk qusqa navbar utaq tablayuq puriypa urayk'aq menú kaqninta pakan. |
$().dropdown('update') |
Huk elementopa urayk'achiqpa maypi kayninta musuqchan. |
$().dropdown('dispose') |
Huk elementopa uraykamuyninta chinkachin. |
Eventos nisqakuna
Llapan urayk'aq ruwaykuna 's tayta elemento kaqpi rawrasqa .dropdown-menu
chaymanta huk relatedTarget
propiedadniyuq, mayqinpa chaninmi toggling ancla elemento. hide.bs.dropdown
chaymanta hidden.bs.dropdown
ruwaykuna huk clickEvent
propiedadniyuq kanku (ñawpaq ruway laya kaqtinlla click
) mayqinchus huk Sucedimiento Objeto ñit'iy ruwaypaq hap'in.
Ruwana | Willay |
---|---|
show.bs.dropdown |
Kay ruwayqa chaylla rawrarin mayk'aq rikuchiy instancia método waqyasqa. |
shown.bs.dropdown |
Kay ruwayqa llamk'achisqa kachkan mayk'aq urayk'achiq ruwaqman rikukuq ruwasqa (CSS tikraykunata suyanqa, tukusqa kananpaq). |
hide.bs.dropdown |
Kay ruwayqa chaylla llamk'achisqa kan mayk'aq pakay instancia ñan waqyasqa. |
hidden.bs.dropdown |
Kay ruwayqa llamk'achisqa kanqa mayk'aq urayk'achiq llamk'achiqmanta pakasqa kayta tukusqa (CSS tikraykunata suyanqa, tukusqa kananpaq). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})