Dropdowns kan jedhu
Tarreewwan hidhannoo fi kanneen biroo agarsiisuuf haguuggii haalata jijjiiri, tarreewwan tarree Bootstrap waliin.
Haala Waliigalaa
Kubbaawwan jijjiiramuu danda'u, tarreewwan hidhannoowwanii fi kkf agarsiisuuf haguuggii haalata. Isaanis Bootstrap dropdown JavaScript plugin dabalameen walqunnamtii akka ta'an taasifamaniiru. Isaan kan toggled cuqaasuun malee hovering gochuudhaan miti; kun murtoo dizaayinii itti yaadanii kennamudha .
Dropdowns mana kitaabaa qaama sadaffaa irratti ijaaramaniiru, Popper , kan iddoo daayinamikii fi adda baasuu iddoo ilaalchaa kenna. JaavaScript Bootstrap dura popper.min.js dabaluu kee mirkaneessi ykn bootstrap.bundle.min.js
/ bootstrap.bundle.js
kan Popper of keessaa qabu fayyadami. Popper navbars keessatti dropdowns positioning gochuuf hin fayyadamu haa ta'u malee akka dynamic positioning hin barbaachisu.
Yoo JavaScriptutil.js
keenya madda irraa ijaaraa jirta ta'e, .
Dhaqqabummaa
Istaandardiin WAI ARIArole="menu"
wiijetii qabatamaa ibsa , garuu kun menuwwan aplikeeshinii fakkaatanii kanneen gochoota ykn dalagaalee kakaasan adda ta'a. Sajoo ARIA wanta sajoo, wanta sajoo sanduuqa filannoo, wanta sajoo qaree raadiyoo, gareewwan qaree raadiyoo, fi sajoo xiqqaa qofa qabaachuu danda'u.
Bootstrap's dropdowns, gama biraatiin, akka waliigalaa fi haalawwan adda addaa fi caasaa mallattoo irratti hojiirra ooluu danda'aniif qophaa'aniiru. Fakkeenyaaf, tarreewwan galtee dabalataa fi too'annoo unkaa of keessaa qaban uumuun ni danda'ama, kan akka man'ee barbaacha ykn unka galmee. Sababa kanaaf, Bootstrap amaloota role
fi menuwwan ARIAaria-
dhugaatiif barbaachisan kamiyyuu hin eegu (ofumaanis hin dabalu). Barreessitoonni amaloota adda ta’an kana ofuma isaanii hammachuu qabu.
Haa ta'u malee, Bootstrap walqunnamtii menu furtuu istaandaardii baay'eedhaaf deeggarsa ijaarame dabalata, kan akka dandeettii .dropdown-item
furtuuwwan qaree fayyadamuun elementoota dhuunfaa keessa socho'uu fi furtuun menu cufuu ESC.
Fakkeenyaaf
Jijjiirraa tarree (qaree ykn hidhaa kee) fi sajoo tarree keessaa .dropdown
, ykn qaama biraa kan labsu marsi position: relative;
. Dropdowns irraa <a>
ykn <button>
elementoota fedhii kee ta'uu danda'u haala gaariin walsimuuf kakaafamuu danda'a.
Qabduu tokko qofa
Tokkichi kamiyyuu .btn
gara jijjiirama mallattoo tokko tokkoon gara jijjiirraa gadi-bu'aa jijjiiramuu danda'a. <button>
Akkaataa isaan elementoota lamaanuu wajjin hojiitti galchuu dandeessu kunooti :
<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>
Akkasumas <a>
elementoota waliin:
<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>
Kutaan hundarra gaariin kana gochuu dandeessa button variant kamiinuu, akkasumas:
<!-- 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>
Qabduu addaan qoodi
Haaluma walfakkaatuun, tarreewwan qaree qoqqoodaman kanneen mallattoo walfakkaataa ta'an kanneen qaree tokkoo wajjin wal fakkaatu uumi, garuu .dropdown-toggle-split
naannoo caret gadi bu'aa addaan fageenya sirrii ta'eef dabaluudhaan.
Gitaa dabalataa kana fayyadamnee horizontal padding
gama lamaanuu caret %25 hir'isuu fi margin-left
that's added for regular button dropdowns balleessuuf. Jijjiiramni dabalataa sun caret qaree addaan ba'e keessatti giddugaleessa akka ta'ee fi bakka rukuttaa safara sirrii ta'e qaree guddaa cinatti kenna.
<!-- 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>
Saayizii gochuu
Tarreewwan qaree qaree hammangaa hunda waliin hojjetu, qaree durtii fi qoodame dabalatee.
<!-- 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>
Kallattii
Dropup jedhu
.dropup
Qaaqa warraa irratti dabaluudhaan qaaqawwan tarree qaamolee olitti kakaasi .
<!-- 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 jedhu
.dropright
Qaaqa warraa irratti dabaluudhaan sajoo tarree mirgaa qaamolee irratti kakaasi .
<!-- 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>
Dropleeft jedhamuun beekama
.dropleft
Qaaqa warraa irratti dabaluudhaan sajoo tarree bitaa qaamolee irratti kakaasi .
<!-- 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>
Wantoota menu
Seenaa keessatti qabiyyeen menu gadi bu'aa hidhaa ta'uu qaba ture , garuu kana booda v4 irratti akkas miti. Amma filannoodhaan <button>
elementoota tarreewwan kee keessatti <a>
s qofa osoo hin taane fayyadamuu dandeessa.
<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>
Akkasumas wantoota tarree wal-qunnamsiisoo hin taane waliin uumuu dandeessa .dropdown-item-text
. Faayidaa CSS ykn barruu amala ta'een caalaatti style gochuuf bilisa ta'i.
<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>
Si'aawaa
.active
Wantoota tarree keessa jiranitti dabali akka socho'aa ta'etti akkaataa itti gootu .
<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>
Miidhamaa
.disabled
Wantoota akka hanqifameetti akkaataa itti godhuuf tarree keessa jiranitti dabali .
<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>
Hiriirsa menu
Akka durtiitti, sajoo tarree ofumaan 100% gubbaa irraa fi gama bitaa warra isaa irratti dhaabbata. Sajoo tarree gara mirgaatti .dropdown-menu-right
dabali ..dropdown-menu
<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>
Hiriirsuu deebii kennuu
Yoo qindaa'ina deebii fayyadamuu barbaadde, data-display="static"
amalli dabaluudhaan iddoo daayinamikii hanqisi fi gita jijjiirama deebii fayyadami.
Sajoo tarree gadi bu'aa qabxii cabsuu kennamee ykn guddaa wajjin mirga qindeessuuf , dabali .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>
Sajoo tarree bitaa tuqaa cabsuu kennamee ykn guddaa waliin qindeessuuf , dabali .dropdown-menu-right
fi .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>
Hubadhu data-display="static"
, Popper navbar keessatti waan hin fayyadamneef, qaree gadi bu'aa navbar keessatti amaloota dabaluu hin barbaachisu.
Qabiyyee menu
Mata dureewwan
Kutaalee gochaalee sajoo tarree kamiyyuu keessatti asxaa gochuuf mataduree dabali.
<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>
Qoqqoodduu
Garee wanta menu walqabatan qoqqoodduu waliin addaan baasi.
<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>
Barreeffama
Barruu bifa bilisaa kamiyyuu barruu waliin sajoo tarree keessa kaa'iitii faayidaa addaan fageenyaa fayyadami . Hubadhu, bal'ina sajoo daangessuuf akkaataa safara dabalataa si barbaachisuu hin oolu.
<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>
Unkaalee
Unkaa sajoo tarree keessa kaa'i, ykn gara sajoo gadi bu'aa godhi, fi faayidaa margina ykn padding fayyadamii iddoo negaatiivii barbaaddu kenniif.
<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>
Filannoowwan gadi bu'an
Bakka gadi bu'aa jijjiiruuf data-offset
ykn fayyadami .data-reference
<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>
Fayyadama
Karaa amaloota deetaa ykn JaavaScript, ifteessituun gadi bu'aa qabiyyee dhokataa (menuuwwan gadi bu'aa) .show
gita warra irratti jijjiiruun jijjiira .dropdown-menu
. Amalli kun data-toggle="dropdown"
sadarkaa aplikeeshinii irratti qaaqawwan gadi bu'aa cufuuf irratti hirkata, kanaaf yeroo hunda fayyadamuun yaada gaarii dha.
$.noop
)
mouseover
ijoollee dhiyeenya
<body>
elementichaatti dabalata. This admittedly ugly hack is necessary to work around a
quirk in iOS' event delegation , kunis yoo kana hin taane tuquun bakka kamittiyyuu gadi bu'iinsaan ala ta'e koodii gadi bu'aa cufu akka hin kakaasne dhorka ture. Erga gadi bu'iinsi cufamee booda,
mouseover
qabattoonni duwwaa dabalataa kun ni haqamu.
Karaa amaloota deetaa
data-toggle="dropdown"
Tarree tokko jijjiiruuf hidhaa ykn qaree irratti dabali .
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Karaa JaavaScript
Karaa JaavaScript kanneen gadi bu'an bilbili:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
ammallee barbaachisaadha
Karaa JaavaScript tarree kee waamtus ykn inumaayyuu data-api fayyadamuu kee osoo hin ilaalin, data-toggle="dropdown"
yeroo hunda elementii kaka'umsaa gadi bu'aa irratti argamuun barbaachisaadha.
Filannoowwan
Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-
, akkuma keessatti dabali data-offset=""
.
Maqaa | Akaakuu | Durtii dha | Ibsa |
---|---|---|---|
ofseeti jechuun ni danda’ama | lakkoofsa | tarree | faayidaa | 0. | Ofseeti kufaatii galma isaa wajjin walqabatee. Faankishiniin tokko ofseeti murteessuuf yeroo fayyadamu, wanta deetaa ofseeti akka murfii isaa isa jalqabaatti of keessaa qabuun waamama. Faankishinichi wanta caasaa walfakkaataa qabu deebisuu qaba. Qaamni kakaasu DOM noodiin akka falmii lammaffaatti darba. Odeeffannoo dabalataaf Popper's offset docs ilaali . |
garagalchuu | boolee | dhugaa | Yoo qaama wabii irratti wal-irra bu'e, Gadi-bu'aan akka garagalchu hayyami. Odeeffannoo dabalataaf Popper's flip docs ilaali . |
daangaa | tarree | qabiyyee | 'Warra garagalchuu'. | Daangaa danqaa dhangala'aa sajoo tarree gadi bu'aa. Gatii 'viewport' , 'window' , 'scrollParent' , ykn wabii HTMLElement fudhata (JavaScript qofa). Odeeffannoo dabalataaf galmeewwan PreventOverflow Popper ilaali . |
wabeeffannaa | tarree | qabiyyee | 'toggle' jedhu. | Qaama wabii sajoo tarree. Gatii 'toggle' , 'parent' , ykn wabii HTMLElement fudhata. Odeeffannoo dabalataaf Popper's referenceObject docs ilaali . |
agarsiisa | hidhaa | 'daayinamikii'. | Akka durtiitti, iddoo daayinamikiidhaaf Popper fayyadamna. Kana waliin hanqisi static . |
popperQindeessaa | null | meeshaa | duwwaa | Qindaa'ina Popper durtii Bootstrap jijjiiruuf, qindeessaa Popper ilaali |
Hubadhu yeroo boundary
gatii kamiyyuu irratti qindaa'u 'scrollParent'
, akkaataan qabduu position: static
irratti hojii irra oola ..dropdown
Malawwan
Mala | Ibsa |
---|---|
$().dropdown('toggle') |
Sajoo tarree navbar kennamee ykn qajeelcha caancalaa jijjiira. |
$().dropdown('show') |
Sajoo tarree navbar kenname ykn qajeelcha caancalaa agarsiisa. |
$().dropdown('hide') |
Sajoo tarree navbar kennamee ykn qajeelcha caancalaa dhoksa. |
$().dropdown('update') |
Bakka tarree qaama tokkoo fooyyessa. |
$().dropdown('dispose') |
Tarree elementii tokkoo balleessa. |
Taateewwan
Taateewwan gadi bu'aa hundi .dropdown-menu
qaama warraa 's irratti dhukaafamu fi relatedTarget
qabeentaa qabu, kan gatiin isaa qaama anchor jijjiirraa dha. hide.bs.dropdown
fi hidden.bs.dropdown
taateewwan clickEvent
qabeentaa qabu (yeroo akaakuu taatee jalqabaa ta'e qofa click
) kan Taatee taatee cuqaasuudhaaf Wanti Taatee of keessaa qabu.
Taatee | Ibsa |
---|---|
show.bs.dropdown |
Taatee kun yeroo mala fakkeenya agarsiisaa waamamu battalumatti dhukaasa. |
shown.bs.dropdown |
Taatee kun yeroo gadi bu'iinsi fayyadamaaf akka mul'atu godhame ni ari'ama (ce'umsa CSS ni eega, xumuruuf). |
hide.bs.dropdown |
Taatee kun yeroo mala fakkeenya dhoksaa waamame battalumatti dhukaafama. |
hidden.bs.dropdown |
Taatee kun kan dhukaafamu yeroo gadi bu'iinsi fayyadamaa irraa dhokfamuu xumure (ce'umsa CSS ni eega, xumuruuf). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})