Ukwehla
Guqula umxholo wokwaleka ukuze ubonise uluhlu lwamakhonkco kunye nokunye kunye ne-Bootstrap yokuhla iplagi.
Isishwankathelo
Ukwehla kuyatshintsheka, ukwaleka ngokomxholo wokubonisa uluhlu lwamakhonkco kunye nokunye. Zenziwe ukuba zisebenze kunye ne-Bootstrap yokuhla iplagi yeJavaScript. Ziguqulwa ngokucofa, hayi ngokushukuma; esi sisigqibo soyilo ngabom .
Ukwehla kwakhelwe kwithala leencwadi lesithathu, iPopper , ebonelela ngokuma okuguquguqukayo kunye nobhaqo lwendawo yokujonga. Qinisekisa ukuquka i -popper.min.js phambi kweJavaScript yeBootstrap okanye usebenzise bootstrap.bundle.min.js
/ bootstrap.bundle.js
equlethe iPopper. I-Popper ayisetyenziswanga ukubeka ukwehla kwi-navbar nangona kungafuneki indawo eguqukayo.
Ukuba wakha iJavaScript yethu kwimvelaphi, kufunautil.js
.
Ukufikeleleka
Umgangatho we WAI ARIA uchaza role="menu"
iwijethi yokwenyani , kodwa oku kukodwa kwisicelo-njengemenu ezixhokonxa iintshukumo okanye imisebenzi. Iimenyu zeARIA zinokuqulatha kuphela izinto zemenyu, izinto zemenyu yebhokisi yokukhangela, izinto zemenyu yeqhosha lerediyo, amaqela amaqhosha erediyo, kunye neemenyu ezisezantsi.
I-Bootstrap's dropdowns, kwelinye icala, yenzelwe ukuba ibe yegeneric kwaye isebenze kwiimeko ezahlukeneyo kunye nezakhiwo zokuphawula. Umzekelo, kuyenzeka ukuba wenze izinto eziwa phantsi eziqulathe amagalelo awongezelelweyo kunye nolawulo lwefom, njengemimandla yokukhangela okanye iifom zokungena. Ngesi sizathu, iBootstrap ayilindelanga (okanye yongeze ngokuzenzekelayo) nayiphi na role
kunye aria-
neempawu ezifunekayo kwiimenyu zokwenyani zeARIA . Ababhali kuya kufuneka babandakanye ezi mpawu zithe ngqo ngokwabo.
Nangona kunjalo, i-Bootstrap iyongeza inkxaso eyakhelwe-ngaphakathi kunxibelelwano lwemenyu yebhodi yezitshixo eqhelekileyo, njengokukwazi ukuhamba .dropdown-item
kwizinto ezizimeleyo usebenzisa izitshixo zekhesa kwaye uvale imenyu ESCngesitshixo.
Imizekelo
Gqibezela itoggle yokwehla (iqhosha lakho okanye ikhonkco) kunye nemenyu eyehlayo ngaphakathi .dropdown
, okanye enye into ebhengeza position: relative;
. Ukwehla kunokuvuswa ukusuka <a>
okanye <button>
izinto ukuze zilungele iimfuno zakho ezinokubakho.
Iqhosha elinye
Nayiphi na enye .btn
ingajikwa ibe yidropdown toggle nolunye utshintsho lophawulo. Nantsi indlela onokuthi uzisebenzise ngayo naziphi na <button>
izinto:
<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>
Kwaye kunye <a>
nezinto:
<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>
Elona candelo lilungileyo ungakwenza oku ngalo naluphi na uhlobo lweqhosha, nalo:
<!-- 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>
Yahlula iqhosha
Ngokukwanjalo, yenza iqhosha elicandiweyo elehlayo elinophawu olufanayo njengokwehla kweqhosha elinye, kodwa ngokongezwa .dropdown-toggle-split
kwesithuba esifanelekileyo esijikeleze ukhathalelo lokuhla.
Sisebenzisa olu didi longeziweyo ukunciphisa okuthe tyaba padding
macala omabini ekhathalelo ngama-25% kwaye sisuse margin-left
oko kongezwe kumaqhosha asezantsi. Olo tshintsho olongezelelweyo lugcina i-caret igxile kwiqhosha lokwahlula kwaye unikeze indawo yokubetha ngokufanelekileyo ngokufanelekileyo ecaleni kweqhosha eliphambili.
<!-- 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>
Ubungakanani
Amaqhosha okwehlayo asebenza ngamaqhosha abo bonke ubukhulu, kubandakanywa ukungagqibekanga kunye namaqhosha okulahla.
<!-- 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>
Izalathiso
Ukulahla
Qalisa imenyu eyehlayo ngentla kweziqalelo ngokongeza .dropup
kwinto engumzali.
<!-- 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>
I-Dropright
Qalisa imenyu eyehlayo ekunene kwezinto ngokongeza .dropright
kwinto engumzali.
<!-- 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>
I-Dropleft
Qalisa imenyu eyehlayo ekhohlo kwizinto ngokongeza .dropleft
kwinto engumzali.
<!-- 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>
Izinto zemenyu
Ngokwembali imixholo yemenyu eyehlayo bekufuneka ibe ngamakhonkco, kodwa ayisenjalo nge-v4. Ngoku ungakhetha ukusebenzisa <button>
izinto kokwehla kwakho endaweni ye- <a>
s nje.
<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>
Unako kwakhona ukwenza izinto zokuhla ezingasebenziyo nge .dropdown-item-text
. Zive ukhululekile ukwenza isitayile ngakumbi ngeCSS yesiko okanye izinto ezisetyenzisiweyo zokubhaliweyo.
<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>
Iyasebenza
Yongeza .active
kwizinto ezikuluhlu olusezantsi ukuze zizitayile njengezisebenzayo .
<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>
Kukhubazekile
Yongeza .disabled
kwizinto ezikuluhlu olusezantsi ukuze uzibhale njengezicinyiweyo .
<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>
Ulungelelwaniso lwemenyu
Ngokungagqibekanga, imenyu eyehlayo ibekwa ngokuzenzekelayo nge-100% ukusuka phezulu kunye necala lasekhohlo lomzali wayo. Yongeza .dropdown-menu-right
ku-a .dropdown-menu
ukuya ekunene lungelelanisa imenyu eyehlayo.
<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>
Ulungelelwaniso oluphendulayo
Ukuba ufuna ukusebenzisa ulungelelwaniso oluphendulayo, khubaza indawo eguqukayo ngokudibanisa data-display="static"
uphawu kwaye usebenzise iiklasi zokwahluka eziphendulayo.
Ukulungelelanisa ekunene imenyu eyehlayo kunye nendawo yokuphumla enikiweyo okanye enkulu, yongeza .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>
Ukulungelelanisa ekhohlo imenyu eyehlayo kunye nendawo yoqhawulo enikiweyo okanye enkulu, yongeza .dropdown-menu-right
kunye .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>
Qaphela ukuba awudingi kongeza data-display="static"
uphawu loyelelwano kumaqhosha okwehla kwii-navbar, kuba iPopper ingasetyenziswa kwiinavbar.
Umxholo wemenyu
Iiheader
Yongeza iheader ukulebhelisha amacandelo eentshukumo kuyo nayiphi na imenyu eyehlayo.
<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>
Abahluli
Yahlula amaqela ezinto zemenyu ezinxulumeneyo kunye nesahluli.
<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>
Isicatshulwa
Beka nasiphi na isicatshulwa esikhululekileyo kwimenyu eyehlayo ngokubhaliweyo kwaye usebenzise izixhobo zesithuba . Qaphela ukuba uya kufuna izimbo zokulinganisa ezongezelelweyo ukunyanzela ububanzi bemenyu.
<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>
Iifom
Faka ifom ngaphakathi kwemenyu eyehlayo, okanye uyenze ibe yimenyu eyehlayo, kwaye usebenzise i -margin okanye i-padding eziluncedo ukuyinika indawo engalunganga oyifunayo.
<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>
Iinketho zokwehla
Sebenzisa data-offset
okanye data-reference
utshintshe indawo yokwehla.
<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>
Ukusetyenziswa
Ngeempawu zedatha okanye iJavaScript, iplagin eyehlayo itshintsha umxholo ofihliweyo (imenyu eyehlayo) ngokuguqula .show
iklasi kumzali .dropdown-menu
. Uphawu data-toggle="dropdown"
loyelelwano kuthenjelwe kulo ukuvala imenyu eyehlayo kwinqanaba lesicelo, ngoko luluvo oluhle ukusoloko uyisebenzisa.
$.noop
)
mouseover
abaphathi kubantwana
<body>
abasondeleyo bento. Oku kuvunyiweyo ukuba kubi kwe-Hack kuyafuneka ukusebenza malunga ne-
quirk kwi-iOS' abathunywa besiganeko , ebenokuthi ngenye indlela ithintele itephu naphi na ngaphandle kokwehla ekuqaliseni ikhowudi evala ukuhla. Nje ukuba idropdown ivaliwe, ezi zibambi zongezelelweyo ezingenanto
mouseover
ziyasuswa.
Ngeempawu zedatha
Yongeza data-toggle="dropdown"
kwikhonkco okanye iqhosha ukuguqula ukwehla.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
NgeJavaScript
Fowunela ukwehla ngeJavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
isafuneka
Nokuba ufowunela ukwehla kwakho ngeJavaScript okanye endaweni yoko usebenzise i-data-api, data-toggle="dropdown"
isoloko ifuneka ukuba ubekhona kwindawo yokuqalisa ukwehla.
Iinketho
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-offset=""
.
Igama | Uhlobo | Ukuhlala kukho | Inkcazo |
---|---|---|---|
i-offset | inombolo | umtya | umsebenzi | 0 | I-offset yokuhla xa ithelekiswa nethagethi yayo. Xa umsebenzi usetyenziselwa ukumisela i-offset, ubizwa ngento equlethe idatha ye-offset njengengxabano yayo yokuqala. Umsebenzi kufuneka ubuyisele into enesakhiwo esifanayo. Isiqalo se-DOM node sigqithiselwe njengengxoxo yesibini. Ngolwazi oluthe vetshe jonga kumaxwebhu e-Popper's offset . |
flip | boolean | yinyani | Vumela i-Dropdown ukuba ijike xa kukho ukugqithelana kwindawo yereferensi. Ngolwazi oluthe kratya jonga kwiflip docs kaPopper . |
umda | umtya | isiqalelo | 'skrolaMzali' | Umda wothintelo lokuphuphumayo kwimenyu eyehlayo. Yamkela amaxabiso e- 'viewport' , 'window' , 'scrollParent' , okanye i-HTMLElement ireferensi (iJavaScript kuphela). Ngolwazi oluthe vetshe bhekisa kuPopper's preventOverflow docs . |
isalathiso | umtya | isiqalelo | 'guqula' | Isalathiso sesiqalelo semenyu eyehlayo. Yamkela amaxabiso e- 'toggle' , 'parent' , okanye i-HTMLElement ireferensi. Ngolwazi oluthe vetshe jonga kwireferensi yePopperObject docs . |
umboniso | umtya | 'dynamic' | Ngokungagqibekanga, sisebenzisa iPopper kwindawo eguqukayo. Khubaza oku nge static . |
popperConfig | null | into | null | Ukutshintsha uqwalaselo lwePopper lweBootstrap olungagqibekanga, bona uqwalaselo lwePopper |
Qaphela xa boundary
imiselwe kulo naliphi na ixabiso ngaphandle 'scrollParent'
, isimbo position: static
sisetyenziswa .dropdown
kwisikhongozeli.
Iindlela
Indlela | Inkcazo |
---|---|
$().dropdown('toggle') |
Qwalasela imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed. |
$().dropdown('show') |
Ibonisa imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed. |
$().dropdown('hide') |
Ifihla imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed. |
$().dropdown('update') |
Ihlaziya indawo yokwehla kwento. |
$().dropdown('dispose') |
Itshabalalisa into eyehlayo. |
Iziganeko
Zonke iziganeko ezihlayo ziyagxothwa .dropdown-menu
kumzali kwaye relatedTarget
zinepropati, exabiso layo lisisiqalelo seankile eshukumayo. hide.bs.dropdown
kunye hidden.bs.dropdown
neziganeko clickEvent
zinepropati (kuphela xa uhlobo lwesiganeko sokuqala click
) equlathe iNjongo yeSigaba somnyadala wonqakrazo.
Isiganeko | Inkcazo |
---|---|
show.bs.dropdown |
Esi siganeko sivutha ngokukhawuleza xa indlela yokubonisa umboniso ibizwa. |
shown.bs.dropdown |
Esi siganeko sigxothwa xa ukwehla kwenziwe kwabonakala kumsebenzisi (uya kulinda iinguqu zeCSS, ukugqiba). |
hide.bs.dropdown |
Esi siganeko sigxothwa ngokukhawuleza xa indlela yokufihla umzekelo ibizwe. |
hidden.bs.dropdown |
Esi siganeko sigxothwa xa ukwehla kugqityiwe ukufihlwa kumsebenzisi (iya kulinda iinguqulelo zeCSS, ukuba zigqitywe). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})