Zazzagewa
Juyawa mai rufin mahallin mahallin don nuna jerin hanyoyin haɗin gwiwa da ƙari tare da kayan aikin saukar da Bootstrap.
Dubawa
Zazzage-zazzage ana iya jujjuyawa, mai rufin mahallin don nuna jerin hanyoyin haɗin kai da ƙari. An yi su da ma'amala tare da abubuwan da aka haɗa Bootstrap dropdown JavaScript plugin. Ana kunna su ta dannawa, ba ta shawagi ba; wannan yanke shawara ne da gangan .
An gina abubuwan saukarwa akan ɗakin karatu na ɓangare na uku, Popper , wanda ke ba da matsayi mai ƙarfi da gano gani. Tabbatar kun haɗa popper.min.js kafin Bootstrap's JavaScript ko amfani bootstrap.bundle.min.js
/ bootstrap.bundle.js
wanda ya ƙunshi Popper. Ba a yi amfani da Popper don sanya zazzagewa a cikin navbars ko da yake ba a buƙatar matsayi mai ƙarfi ba.
Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatarutil.js
.
Dama
Ma'auni na WAI ARIA yana bayyana ainihin role="menu"
widget din , amma wannan ya keɓanta ga menus-kamar aikace-aikace waɗanda ke haifar da ayyuka ko ayyuka. Menu na ARIA zai iya ƙunsar abubuwan menu kawai, abubuwan menu na akwati, abubuwan menu na maɓallin rediyo, ƙungiyoyin maɓallin rediyo, da ƙananan menus.
Bootstrap's dropdowns, a gefe guda, an ƙirƙira su don zama na yau da kullun kuma ana amfani da su ga yanayi iri-iri da tsarin saɓani. Misali, yana yiwuwa a ƙirƙiri zazzagewa waɗanda ke ƙunshe da ƙarin bayanai da sarrafawa, kamar filayen bincike ko fom ɗin shiga. Saboda wannan dalili, Bootstrap baya tsammanin (ko ƙara ta atomatik) kowane ɗayan role
da aria-
halayen da ake buƙata don menu na ARIA na gaskiya. Marubuta dole ne su haɗa waɗannan ƙarin takamaiman halaye da kansu.
Koyaya, Bootstrap yana ƙara ginanniyar goyon baya don yawancin ma'amalar menu na maɓalli na yau da kullun, kamar ikon motsawa ta hanyar .dropdown-item
abubuwa ɗaya ta amfani da maɓallan siginan kwamfuta da rufe menu tare da ESCmaɓalli.
Misalai
Kunna maɓallin zazzagewa (maɓallin ku ko hanyar haɗin yanar gizonku) da menu na zaɓuka a cikin .dropdown
, ko wani abin da ke bayyana position: relative;
. Za a iya jawo saukar saukarwa daga <a>
ko <button>
abubuwa don dacewa da yuwuwar bukatun ku.
Maɓalli guda ɗaya
.btn
Ana iya jujjuya kowane guda ɗaya zuwa juzu'in zazzagewa tare da wasu canje-canje masu alama. Ga yadda zaku iya sanya su aiki tare da kowane <button>
abu:
<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>
Kuma tare da <a>
abubuwa:
<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>
Mafi kyawun sashi shine zaku iya yin wannan tare da kowane bambance-bambancen maɓalli, kuma:
<!-- 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>
Maɓallin Raba
Hakazalika, ƙirƙiri maballin tsagawa tare da kusan alama iri ɗaya kamar maɓalli guda ɗaya, amma tare da ƙari .dropdown-toggle-split
don tazarar da ta dace a kusa da wurin zaɓuka.
Muna amfani da wannan ƙarin ajin don rage kwance padding
a kowane gefe na kulawa da kashi 25% kuma cire margin-left
abin da aka ƙara don maɓalli na yau da kullun. Waɗannan ƙarin canje-canje suna kiyaye kulawar a tsakiya a cikin maɓallin tsaga kuma suna ba da mafi girman yanki mai girman da ya dace kusa da babban maɓallin.
<!-- 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>
Girman girma
Maɓallin zazzagewa yana aiki tare da maɓallai na kowane girma, gami da tsoho da maɓallan zaɓuka masu tsaga.
<!-- 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>
Hanyoyi
Juyawa
Fara menu na zazzage sama da abubuwa ta ƙara .dropup
zuwa kashi na iyaye.
<!-- 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
Fara menu na zazzage a dama na abubuwan ta ƙara .dropright
zuwa kashi na iyaye.
<!-- 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>
Sauke
Fara menu na zazzage a hagu na abubuwan ta ƙara .dropleft
zuwa kashi na iyaye.
<!-- 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>
Abubuwan menu
Abubuwan menu na zaɓuka na tarihi dole ne su zama hanyoyin haɗin gwiwa, amma wannan ba haka yake ba tare da v4. Yanzu zaku iya amfani <button>
da abubuwan da aka zaɓa a cikin jerin abubuwan da kuke so maimakon kawai <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>
Hakanan zaka iya ƙirƙirar abubuwan zazzage abubuwan da ba sa hulɗa tare da .dropdown-item-text
. Jin kyauta don ƙara salo tare da CSS na al'ada ko kayan aikin rubutu.
<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>
Mai aiki
Ƙara .active
zuwa abubuwa a cikin zazzage don sanya su a matsayin masu aiki .
<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>
An kashe
Ƙara .disabled
abubuwa a cikin zazzage don yin salo da su azaman nakasassu .
<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>
Daidaita menu
Ta hanyar tsoho, menu na zaɓuka ana sanya shi ta atomatik 100% daga sama kuma tare da gefen hagu na iyayensa. Ƙara .dropdown-menu-right
zuwa .dropdown-menu
dama a daidaita menu na zazzagewa.
<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>
Daidaitawa mai amsawa
Idan kana son amfani da jeri mai amsawa, musaki matsayi mai ƙarfi ta ƙara data-display="static"
sifa kuma yi amfani da azuzuwan bambance-bambancen amsa.
Don daidaita menu na zazzage dama.dropdown-menu{-sm|-md|-lg|-xl}-right
tare da wurin da aka bayar ko mafi girma, ƙara .
<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>
Don daidaita menu na zaɓin hagu.dropdown-menu-right
tare da wurin da aka bayar ko mafi girma, ƙara da .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>
Lura cewa ba kwa buƙatar ƙara data-display="static"
sifa zuwa maɓallan zaɓuka a cikin navbars, tunda ba a amfani da Popper a navbars.
Menu abun ciki
Shugabanni
Ƙara taken zuwa lakabin sassan ayyuka a kowane menu na zazzagewa.
<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>
Masu rarrabawa
Rarraba ƙungiyoyin abubuwan menu masu alaƙa tare da mai rarrabawa.
<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>
Rubutu
Sanya kowane rubutu na kyauta a cikin menu na zazzage tare da rubutu kuma yi amfani da abubuwan amfani tazara . Lura cewa ƙila za ku buƙaci ƙarin salon ƙima don taƙaita faɗin menu.
<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>
Siffofin
Saka fom a cikin menu na zazzage, ko sanya shi cikin menu na zaɓuka, kuma yi amfani da gefe ko abubuwan amfani don ba shi mummunan sarari da kuke buƙata.
<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>
Zaɓuɓɓukan saukarwa
Yi amfani data-offset
ko data-reference
don canza wurin zazzagewar.
<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>
Amfani
Ta hanyar sifofin bayanai ko JavaScript, zazzage plugin ɗin yana jujjuya abun ciki na ɓoye (menun saukarwa) ta hanyar jujjuya .show
aji akan iyaye .dropdown-menu
. An data-toggle="dropdown"
dogara da sifa don rufe menu na zazzagewa a matakin aikace-aikace, don haka yana da kyau a yi amfani da shi koyaushe.
$.noop
)
mouseover
zuwa ga yaran abubuwan nan kusa
<body>
. Wannan admittedly mummuna hack wajibi ne don aiki a kusa da wani
quirk a iOS' taron wakilan , wanda in ba haka ba zai hana wani famfo a ko'ina a waje da dropdown daga jawo da code cewa rufe jerin zaɓuka. Da zarar an rufe
mouseover
zazzagewar, ana cire waɗannan ƙarin masu sarrafa fanko.
Ta hanyar bayanan halayen
Ƙara data-toggle="dropdown"
zuwa hanyar haɗi ko maɓalli don kunna zazzagewa.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Ta hanyar JavaScript
Kira zazzagewar ta hanyar JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
har yanzu ake bukata
Ko da kun kira zazzagewar ku ta JavaScript ko kuma a maimakon haka amfani da data-api, data-toggle="dropdown"
ana buƙatar koyaushe don kasancewa akan abubuwan faɗakarwa.
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-
, kamar a cikin data-offset=""
.
Suna | Nau'in | Default | Bayani |
---|---|---|---|
biya diyya | lamba | zaren | aiki | 0 | Matsakaicin zazzagewa dangane da manufar sa. Lokacin da aka yi amfani da aiki don tantance abin da aka kashe, ana kiran shi da wani abu mai ɗauke da bayanan kashewa azaman hujja ta farko. Dole ne aikin ya dawo da abu mai tsari iri ɗaya. An wuce kullin DOM mai jawowa azaman hujja ta biyu. Don ƙarin bayani koma zuwa Popper's offset docs . |
juya | boolean | gaskiya | Ba da izinin saukarwa don jujjuya idan akwai abin da ya faru a kan abin da ake tunani. Don ƙarin bayani koma zuwa Popper's lip docs . |
iyaka | zaren | kashi | ' gungurawaParent' | Matsakaicin ƙaƙƙarfan ƙayyadaddun iyaka na menu na zazzagewa. Yana karɓar ƙimar 'viewport' , 'window' , 'scrollParent' , ko ma'anar HTMLElement (JavaScript kawai). Don ƙarin bayani koma zuwa Popper's preventOverflow docs . |
tunani | zaren | kashi | 'juyawa' | Abubuwan da ake bi na menu na zazzagewa. Yana yarda da ƙimar 'toggle' , 'parent' , ko bayanin HTMLElement. Don ƙarin bayani koma zuwa Popper's referenceObject docs . |
nuni | kirtani | 'tsari mai ƙarfi' | Ta hanyar tsoho, muna amfani da Popper don matsayi mai ƙarfi. Kashe wannan tare da static . |
popperConfig | null | abu | banza | Don canza tsohuwar saitin Popper na Bootstrap, duba tsarin Popper |
Lura lokacin da boundary
aka saita zuwa kowace ƙima banda 'scrollParent'
, position: static
ana amfani da salon a cikin .dropdown
akwati.
Hanyoyin
Hanya | Bayani |
---|---|
$().dropdown('toggle') |
Yana jujjuya menu na zaɓuka na mashigar kewayawa da aka bayar ko kewayawa da aka buga. |
$().dropdown('show') |
Yana nuna menu na zazzagewa na mashigin kewayawa da aka bayar ko kewayawa ta shafi. |
$().dropdown('hide') |
Yana ɓoye menu na zaɓuka na mashigar kewayawa da aka bayar ko kewayawa da aka buga. |
$().dropdown('update') |
Yana sabunta matsayin zazzagewar kashi. |
$().dropdown('dispose') |
Yana lalata abubuwan zazzagewa. |
Abubuwan da suka faru
Duk abubuwan da suka faru na zazzage ana harba su ne a .dropdown-menu
ɓangaren mahaifa kuma suna da relatedTarget
dukiya, wanda ƙimarsa ita ce ɓangaren anka mai jujjuyawa. hide.bs.dropdown
kuma hidden.bs.dropdown
abubuwan da suka faru suna da clickEvent
dukiya (kawai lokacin da ainihin nau'in taron shine click
) wanda ya ƙunshi Abun Abubuwan da ke faruwa don taron dannawa.
Lamarin | Bayani |
---|---|
show.bs.dropdown |
Wannan taron yana gobara nan da nan lokacin da aka kira hanyar misalin nuni. |
shown.bs.dropdown |
Ana korar wannan taron lokacin da aka bayyana zazzagewa ga mai amfani (zai jira canjin CSS, don kammala). |
hide.bs.dropdown |
Ana korar wannan taron nan da nan lokacin da aka kira hanyar misalin ɓoye. |
hidden.bs.dropdown |
Ana kora wannan taron lokacin da jerin abubuwan da aka gama ɓoye daga mai amfani (zai jira canjin CSS, don kammala). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})