Goitibeherak
Aldatu testuinguru-gainjartzeak esteken zerrendak eta gehiago bistaratzeko Bootstrap goitibeherako pluginarekin.
Ikuspegi orokorra
Goitibeherak txandaka daitezke, esteken zerrendak eta gehiago bistaratzeko testuinguruko gainjartzeak. Elkarreragile egiten dira sartutako Bootstrap goitibeherako JavaScript pluginarekin. Klik eginez txandakatzen dira, ez pasatzean; hau nahita diseinatutako erabakia da .
Goitibeherak hirugarrenen liburutegi batean eraikitzen dira, Popper , zeinak kokapen dinamikoa eta ikuspegia hautematea eskaintzen du. Ziurtatu popper.min.js sartzen duzula Bootstrap-en JavaScript baino lehen edo Popper duen bootstrap.bundle.min.js
/ erabili. bootstrap.bundle.js
Popper ez da erabiltzen goitibehurrak nabigazio-barretan kokatzeko, baina kokapen dinamikoa ez baita beharrezkoa.
Gure JavaScript iturburutik eraikitzen ari bazara, beharrezkoautil.js
da .
Irisgarritasuna
WAI ARIA estandarrak benetako role="menu"
widget bat definitzen du, baina hau ekintzak edo funtzioak abiarazten dituzten aplikazio moduko menuetan espezifikoa da. ARIA menuek menu-elementuak, kontrol-laukiaren menu-elementuak, irrati-botoien menu-elementuak, irrati-botoien taldeak eta azpi-menuak izan ditzakete.
Bootstrap-en goitibehurrak, berriz, generikoak izan daitezen eta hainbat egoera eta marka-egituretarako aplikagarriak dira. Esate baterako, posible da sarrera gehigarriak eta inprimaki-kontrolak dituzten goitibehurrak sortzea, hala nola bilaketa-eremuak edo saioa hasteko inprimakiak. Hori dela eta, Bootstrap-ek ez du espero (ezta automatikoki gehitzen) benetako ARIA menuetarako beharrezkoak role
diren atributuetarik. Egileek beraiek sartu beharko dituzte atributu zehatzago horiek.aria-
Hala eta guztiz ere, Bootstrap-ek teklatuaren menu-interakzio estandar gehienetarako euskarria gehitzen du, hala nola, .dropdown-item
elementu indibidualetan zehar mugitzeko gaitasuna kurtsore-teklak erabiliz eta menua teklaz ixteko aukera ESC.
Adibideak
Itzulbiratu goitibeherako hautagailua (zure botoia edo esteka) eta goitibeherako menua .dropdown
, edo deklaratzen duen beste elementu batean position: relative;
. Goitibeherak zure beharretara hobeto egokitzeko elementuetatik abiarazi <a>
daitezke .<button>
Botoi bakarra
Edozein single .btn
goitibeherako hautagailu bihur daiteke marka-aldaketa batzuekin. Hona hemen bi elementuekin nola jar ditzakezun lanean <button>
:
<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>
Eta <a>
elementuekin:
<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>
Alderik onena hau edozein botoi aldaerarekin ere egin dezakezula da:
<!-- 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>
Zatitu botoia
Era berean, sortu zatitutako botoien goitibeherako botoi bakarreko goitibeherako ia marka berdinarekin, baina .dropdown-toggle-split
goitibeherako ikurraren inguruan tarte egokia gehituta.
Klase gehigarri hau kartaren padding
bi aldeetako horizontala % 25 murrizteko eta margin-left
ohiko botoien goitibehetarako gehitzen dena kentzeko erabiltzen dugu. Aldaketa gehigarri horiek ikurra zatitutako botoian erdiratuta mantentzen dute eta botoi nagusiaren ondoan tamaina egokiagoko sakatu-eremua eskaintzen dute.
<!-- 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>
Tamaina
Botoien goitibeharrek tamaina guztietako botoiekin funtzionatzen dute, lehenetsitako eta zatitutako goitibeherako botoiak barne.
<!-- 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>
Norabideak
Jaitsiera
.dropup
Aktibatu goitibeherako menuak elementuen gainean elementu nagusiari gehituz .
<!-- 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>
Drop-eskubidea
.dropright
Aktibatu elementuen eskuineko goitibeherako menuak elementu nagusiari gehituz .
<!-- 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
.dropleft
Aktibatu elementuen ezkerreko goitibeherako menuak elementu nagusiari gehituz .
<!-- 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>
Menuko elementuak
Historikoki goitibeherako menuaren edukiak estekak izan behar ziren, baina hori ez da jada v4-rekin gertatzen. <button>
Orain, aukeran , zure goitibehetako elementuak erabil ditzakezu <a>
s-en ordez.
<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>
Goitibeherako elementu ez-interaktiboak ere sor ditzakezu .dropdown-item-text
. Anima zaitez gehiago estiloa CSS edo testu-utilitate pertsonalizatuekin.
<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>
Aktiboa
Gehitu .active
goitibeherako elementuei aktibo gisa estiloa jartzeko .
<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>
Desgaituta
Gehitu .disabled
goitibeherako elementuei desgaitu gisa estiloa jartzeko .
<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>
Menuen lerrokatzea
Lehenespenez, goitibeherako menu bat automatikoki kokatzen da % 100ean bere gurasoaren goiko eta ezkerreko aldean. Gehitu .dropdown-menu-right
a .dropdown-menu
eskuinera lerrokatu goitibeherako menua.
<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>
Lerrokadura erantzunkorra
Lerrokatze sentikorra erabili nahi baduzu, desgaitu kokapen dinamikoa data-display="static"
atributua gehituz eta erabili aldakuntza klasikoak.
Goitibeherako menua eten puntuarekin edo handiagoarekin eskuinera lerrokatzeko , gehitu .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>
Goitibeherako menua ezkerreko eten puntuarekin edo handiagoarekin lerrokatzeko , gehitu .dropdown-menu-right
eta .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>
Kontuan izan ez duzula data-display="static"
atributurik gehitu behar goitibeherako botoietan nabigazio-barren, Popper ez baita erabiltzen nabigazio-barren.
Menuaren edukia
Goiburuak
Gehitu goiburu bat ekintzen atalak etiketatzeko edozein goitibeherako menutan.
<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>
Banatzaileak
Bereizi erlazionatutako menuko elementuen taldeak banatzaile batekin.
<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>
Testua
Jarri forma libreko edozein testu goitibeherako menu batean testuarekin eta erabili tartekatzeko utilitateak . Kontuan izan ziurrenik tamaina-estilo gehigarriak beharko dituzula menuaren zabalera mugatzeko.
<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>
Formak
Jarri inprimaki bat goitibeherako menu batean, edo egin goitibeherako menu batean, eta erabili marjina edo betegarri-utilitateak behar duzun espazio negatiboa emateko.
<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>
Goitibeherako aukerak
Erabili data-offset
edo data-reference
goitibeherako kokapena aldatzeko.
<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>
Erabilera
Datu-atributuen edo JavaScript-en bidez, goitibeherako pluginak ezkutuko edukia (goigabeko menuak) txandakatzen du, .show
klasea gurasoan aldatuz .dropdown-menu
. Atributua aplikazio mailan goitibeherako menuak ixteko fidatzen da , data-toggle="dropdown"
beraz, komeni da beti erabiltzea.
$.noop
)
kudeatzaile hutsak gehitzen ditu elementuaren mouseover
berehalako seme-alabei
. <body>
Truke itsusi hau beharrezkoa
da iOS-en gertaeraren delegazioan bitxikeriaren inguruan lan egiteko , eta horrek bestela goitibeherako goitibehetik kanpoko edozein tokitan sakatze batek goitibeherako aukera ixten duen kodea abiarazteko eragotziko luke. Goitibehitza itxi ondoren,
mouseover
kudeatzaile huts gehigarri hauek kentzen dira.
Datu-atributuen bidez
Gehitu data-toggle="dropdown"
esteka edo botoi bati goitibeherako aukera aldatzeko.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
JavaScript bidez
Deitu goitibehetara JavaScript bidez:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
oraindik beharrezkoa
Zure goitibehera JavaScript bidez deitzen duzun edo datu-api-a erabiltzen duzun ala ez, data-toggle="dropdown"
beti beharrezkoa da goitibeherako elementu abiarazlean egotea.
Aukerak
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-offset=""
.
Izena | Mota | Lehenetsia | Deskribapena |
---|---|---|---|
desplazamendu | zenbakia | katea | funtzioa | 0 | Goitibeherako desplazamendua bere xedearekiko. Desplazamendua zehazteko funtzio bat erabiltzen denean, lehen argumentu gisa desplazamendu-datuak dituen objektu batekin deitzen da. Funtzioak egitura bereko objektu bat itzuli behar du. DOM nodo abiarazteko elementua bigarren argumentu gisa pasatzen da. Informazio gehiago lortzeko, ikusi Popper-en offset docs . |
irauli | boolearra | egia | Baimendu Goitibehera iraultzea erreferentziako elementuan gainjartzen bada. Informazio gehiagorako, ikusi Popper-en flip docs . |
muga | katea | elementua | 'ScrollParent' | Goitibeherako menuaren gainezka-murriztapenaren muga. 'viewport' , 'window' , 'scrollParent' , edo HTMLElement erreferentzia baten balioak onartzen ditu (JavaScript soilik). Informazio gehiago lortzeko, ikusi Popperren preventOverflow docs . |
erreferentzia | katea | elementua | 'aldatu' | Goitibeherako menuko erreferentzia-elementua. 'toggle' , 'parent' , edo HTMLElement erreferentzia baten balioak onartzen ditu . Informazio gehiago lortzeko, jo Popperren referenceObject docs . |
bistaratzea | katea | 'dinamikoa' | Berez, Popper erabiltzen dugu kokapen dinamikorako. Desgaitu hau erabiliz static . |
popperConfig | nulua | objektua | nulua | Bootstrap-en Popper konfigurazio lehenetsia aldatzeko, ikusi Popper-en konfigurazioa |
Kontuan izan , ez boundary
den beste balio batean ezartzen denean 'scrollParent'
, estiloa edukiontziari position: static
aplikatzen zaiola..dropdown
Metodoak
Metodoa | Deskribapena |
---|---|
$().dropdown('toggle') |
Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua aldatzen du. |
$().dropdown('show') |
Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua erakusten du. |
$().dropdown('hide') |
Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua ezkutatzen du. |
$().dropdown('update') |
Elementu baten goitibeherako posizioa eguneratzen du. |
$().dropdown('dispose') |
Elementu baten goitibeherako zerrenda suntsitzen du. |
Gertaerak
Goitibeherako gertaera guztiak .dropdown-menu
' ren elementu nagusian abiarazten dira eta relatedTarget
propietate bat dute, zeinaren balioa txandakatzeko aingura-elementua den. hide.bs.dropdown
eta hidden.bs.dropdown
gertaerek klik-gertaeraren Gertaera Objektu bat daukan clickEvent
propietate bat dute (jatorrizko gertaera mota denean soilik ).click
Gertaera | Deskribapena |
---|---|
show.bs.dropdown |
Gertaera hau berehala abiarazten da show instance metodoa deitzen denean. |
shown.bs.dropdown |
Gertaera hau goitibehitza erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioen zain egongo da osatzeko). |
hide.bs.dropdown |
Gertaera hau berehala abiarazten da ezkutatzeko instantzia metodoa deitzen denean. |
hidden.bs.dropdown |
Gertaera hau goitibeherako zerrenda erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioen zain egongo da amaitzeko). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})