Dropdowns
Ŝaltu kuntekstajn supermetaĵojn por montri listojn de ligiloj kaj pli kun la menu-aldonaĵo Bootstrap.
Superrigardo
Dropdowns estas ŝanĝeblaj, kuntekstaj supermetaĵoj por montri listojn de ligiloj kaj pli. Ili fariĝas interagaj per la inkluzivita Bootstrap-falumenuo JavaScript-kromaĵo. Ili estas ŝanĝitaj per klakado, ne per ŝvebado; ĉi tio estas intencita desegna decido .
Dropdowns estas konstruitaj sur triaparta biblioteko, Popper , kiu disponigas dinamikan poziciigadon kaj vidfenestrodetekton. Nepre inkluzivu popper.min.js antaŭ la JavaScript de Bootstrap aŭ uzu bootstrap.bundle.min.js
/ bootstrap.bundle.js
kiu enhavas Popper. Popper ne kutimas poziciigi falmenuojn en navbaroj tamen ĉar dinamika poziciigado ne estas postulata.
Se vi konstruas nian JavaScript el la fonto, ĝi postulasutil.js
.
Alirebleco
La WAI ARIA normo difinas realan role="menu"
fenestraĵon , sed ĉi tio estas specifa por aplikaĵ-similaj menuoj kiuj ekigas agojn aŭ funkciojn. ARIA- menuoj povas enhavi nur menueroj, markobutono menueroj, radiobutono menueroj, radiobutongrupoj kaj submenuoj.
La menuoj de Bootstrap, aliflanke, estas desegnitaj por esti ĝeneralaj kaj aplikeblaj al diversaj situacioj kaj markadaj strukturoj. Ekzemple, eblas krei falmenuojn kiuj enhavas pliajn enigojn kaj formularajn kontrolojn, kiel serĉkampojn aŭ ensalutformularojn. Tial, Bootstrap ne atendas (nek aŭtomate aldonas) iun ajn el la role
kaj aria-
atributoj necesaj por veraj ARIA- menuoj. Aŭtoroj devos mem inkluzivi ĉi tiujn pli specifajn atributojn.
Tamen, Bootstrap aldonas enkonstruitan subtenon por la plej multaj normaj klavarmenuaj interagoj, kiel ekzemple la kapablo movi tra individuaj .dropdown-item
elementoj uzante la kursorajn klavojn kaj fermi la menuon per la ESCklavo.
Ekzemploj
Envolvu la baskulon de la falmenuo (via butono aŭ ligilo) kaj la falmenuon ene de .dropdown
, aŭ alia elemento kiu deklaras position: relative;
. Dropdowns povas esti ekigitaj de <a>
aŭ <button>
elementoj por pli bone konveni viajn eblajn bezonojn.
Ununura butono
Ajna unuopaĵo .btn
povas esti igita falmenumo kun iuj markadaj ŝanĝoj. Jen kiel vi povas funkcii ilin per ambaŭ <button>
elementoj:
<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>
Kaj kun <a>
elementoj:
<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>
La plej bona parto estas, ke vi ankaŭ povas fari tion per iu ajn butonvariaĵo:
<!-- 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>
Dividi butonon
Simile, kreu dividitajn butonajn falmenuojn kun preskaŭ la sama markado kiel ununuraj butonfalmenuoj, sed kun la aldono de .dropdown-toggle-split
por taŭga interspaco ĉirkaŭ la falmenumo.
Ni uzas ĉi tiun ekstran klason por redukti la horizontalon padding
ĉe ambaŭ flankoj de la kamero je 25% kaj forigi la margin-left
aldonitan por regulaj butonfalumoj. Tiuj kromaj ŝanĝoj tenas la signon centrita en la dividita butono kaj provizas pli taŭge grandecon trafitan areon apud la ĉefa butono.
<!-- 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>
Dimensio
Butonaj falmenuoj funkcias kun butonoj de ĉiuj grandecoj, inkluzive de defaŭltaj kaj dividitaj falmenuoj.
<!-- 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>
Direktoj
Dropup
Ekfunkciigu falmenuojn super elementoj aldonante .dropup
al la gepatra elemento.
<!-- 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>
Dropright
Ekfunkciigu falmenuojn dekstre de la elementoj aldonante .dropright
al la gepatra elemento.
<!-- 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>
Dropleft
Ekfunkciigu falmenuojn maldekstre de la elementoj aldonante .dropleft
al la gepatra elemento.
<!-- 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>
Menueroj
Historie falmenuaj enhavoj devis esti ligiloj, sed tio ne plu okazas ĉe v4. Nun vi povas laŭvole uzi <button>
elementojn en viaj falmenuoj anstataŭ nur <a>
s.
<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>
Vi ankaŭ povas krei ne-interagajn menumenuojn per .dropdown-item-text
. Bonvolu stiligi plu per kutimaj CSS aŭ tekstaj utilecoj.
<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>
Aktiva
Aldonu .active
al eroj en la menuo por stiligi ilin kiel aktivaj .
<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>
Malebligita
Aldonu .disabled
al eroj en la menuo por stiligi ilin kiel malŝaltitaj .
<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>
Menua vicigo
Defaŭlte, falmenuo estas aŭtomate poziciigita 100% de la supro kaj laŭ la maldekstra flanko de sia gepatro. Aldonu .dropdown-menu-right
al .dropdown-menu
dekstre vicigi la falmenuon.
<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>
Respondema vicigo
Se vi volas uzi respondeman vicigon, malŝaltu dinamikan poziciigon aldonante la data-display="static"
atributon kaj uzu la respondemajn variajn klasojn.
Por vicigi dekstre la falmenuon kun la donita rompopunkto aŭ pli granda, aldonu .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>
Por vicigi maldekstren la falmenuon kun la donita rompopunkto aŭ pli granda, aldonu .dropdown-menu-right
kaj .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>
Notu, ke vi ne bezonas aldoni data-display="static"
atributon al falbutonoj en navbaroj, ĉar Popper ne estas uzata en navbaroj.
Enhavo de la menuo
Kapoj
Aldonu kaplinion por etikedi sekciojn de agoj en iu ajn falmenuo.
<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>
Dividiloj
Apartigu grupojn de rilataj menueroj per disigilo.
<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>
Teksto
Metu ajnan liberforman tekston en falmenuon kun teksto kaj uzu interspacajn utilecojn . Notu, ke vi verŝajne bezonos pliajn grandecostilojn por limigi la menuan larĝecon.
<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>
Formoj
Metu formularon en falmenuon, aŭ transformu ĝin en falmenuon, kaj uzu marĝenajn aŭ kompletigajn ilojn por doni al ĝi la negativan spacon, kiun vi postulas.
<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>
Dropdown opcioj
Uzu data-offset
aŭ data-reference
por ŝanĝi la lokon de la menuo.
<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>
Uzado
Per datumaj atributoj aŭ JavaScript, la falmenuo aldonaĵo ŝanĝas kaŝitan enhavon (falmenuoj) ŝanĝante la .show
klason sur la gepatro .dropdown-menu
. La data-toggle="dropdown"
atributo estas fidata por fermi falmenuojn ĉe aplika nivelo, do estas bona ideo ĉiam uzi ĝin.
$.noop
)
mouseover
manipulilojn al la tujaj infanoj de la
<body>
elemento. Ĉi tiu certe malbela hako estas necesa por labori ĉirkaŭ
strangaĵo en la eventa delegacio de iOS , kiu alie malhelpus frapeton ie ajn ekster la falmenuo ekfunkciigi la kodon, kiu fermas la falmenuon. Post kiam la menuo estas fermita, ĉi tiuj aldonaj malplenaj
mouseover
pritraktiloj estas forigitaj.
Per datumaj atributoj
Aldonu data-toggle="dropdown"
al ligilo aŭ butono por ŝanĝi falmenuon.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Per JavaScript
Voku la menuojn per JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
ankoraŭ bezonata
Sendepende de ĉu vi nomas vian falmenuon per JavaScript aŭ anstataŭe uzas la datuman api, data-toggle="dropdown"
ĉiam necesas ĉeesti sur la ellasilelemento de la menuo.
Opcioj
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-
, kiel en data-offset=""
.
Nomo | Tajpu | Defaŭlte | Priskribo |
---|---|---|---|
ofseto | nombro | ŝnuro | funkcio | 0 | Ofseto de la falmenuo relative al ĝia celo. Kiam funkcio estas uzata por determini la ofseton, ĝi estas vokita kun objekto enhavanta la ofsetajn datumojn kiel sia unua argumento. La funkcio devas redoni objekton kun la sama strukturo. La ekiga elemento DOM-nodo estas pasita kiel la dua argumento. Por pliaj informoj raportu al la ofsetaj dokumentoj de Popper . |
renversi | bulea | vera | Permesu al Dropdown renversi en kazo de interkovro sur la referenca elemento. Por pliaj informoj raportu al la flip docs de Popper . |
limo | ŝnuro | elemento | 'scrollParent' | Superflua limo limo de la falmenuo. Akceptas la valorojn de 'viewport' , 'window' , 'scrollParent' , aŭ HTMLElement-referenco (nur JavaScript). Por pliaj informoj raportu al la dokumentoj preventOverflow de Popper . |
referenco | ŝnuro | elemento | 'ŝalti' | Referenca elemento de la falmenuo. Akceptas la valorojn de 'toggle' , 'parent' , aŭ HTMLElement-referenco. Por pliaj informoj referu al la dokumentoj de referenceObject de Popper . |
ekrano | ŝnuro | 'dinamika' | Defaŭlte, ni uzas Popper por dinamika poziciigado. Malebligu ĉi tion per static . |
popperConfig | nulo | objekto | nula | Por ŝanĝi la defaŭltan Popper-agordon de Bootstrap, vidu la agordon de Popper |
Notu, kiam boundary
estas agordita al iu ajn valoro krom 'scrollParent'
, la stilo position: static
estas aplikata al la .dropdown
ujo.
Metodoj
Metodo | Priskribo |
---|---|
$().dropdown('toggle') |
Ŝaltas la falmenuon de difinita navbreto aŭ klapeta navigado. |
$().dropdown('show') |
Montras la falmenuon de difinita navigado aŭ klapeta navigado. |
$().dropdown('hide') |
Kaŝas la falmenuon de difinita navbreto aŭ klapeta navigado. |
$().dropdown('update') |
Ĝisdatigas la pozicion de la menuo de elemento. |
$().dropdown('dispose') |
Detruas la falmenuon de elemento. |
Eventoj
Ĉiuj falmenuaj eventoj estas pafitaj ĉe la .dropdown-menu
gepatra elemento de la ' kaj havas relatedTarget
posedaĵon, kies valoro estas la ŝanĝanta ankrelemento. hide.bs.dropdown
kaj hidden.bs.dropdown
eventoj havas clickEvent
posedaĵon (nur kiam la origina eventotipo estas click
) kiu enhavas Event Object por la klaka evento.
Evento | Priskribo |
---|---|
show.bs.dropdown |
Ĉi tiu evento tuj ekfunkciigas kiam la metodo de spektaklo estas vokita. |
shown.bs.dropdown |
Ĉi tiu evento estas lanĉita kiam la falmenuo fariĝis videbla por la uzanto (atendos CSS-transirojn, por plenumi). |
hide.bs.dropdown |
Ĉi tiu evento estas lanĉita tuj kiam la metodo kaŝi kazon estas vokita. |
hidden.bs.dropdown |
Ĉi tiu evento estas pafita kiam la menuo finiĝis kaŝita de la uzanto (atendos CSS-transirojn, por finiĝi). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})