Ebintu ebigwa wansi
Toggle contextual overlays okulaga enkalala z'enkolagana n'ebirala ne Bootstrap dropdown plugin.
Okulaba okutwalira awamu
Dropdowns zikyusibwakyusibwa, contextual overlays okulaga enkalala z'enkolagana n'ebirala. Zikolebwa nga zikwatagana ne Bootstrap dropdown JavaScript plugin erimu. Zikyusibwakyusibwa nga zinyiga, so si nga ziwuubaala; kino kusalawo kwa dizayini mu bugenderevu .
Dropdowns zizimbibwa ku tterekero ly’ebitabo ery’ekibiina eky’okusatu, Popper , ekiwa ekifo ekikyukakyuka n’okuzuula ekifo eky’okulaba. Kakasa nti ossaamu popper.min.js nga tonnaba kukola JavaScript ya Bootstrap oba kozesa bootstrap.bundle.min.js
/ bootstrap.bundle.js
erimu Popper. Popper tekozesebwa kuteeka dropdowns mu navbars wadde nga dynamic positioning tekyetaagisa.
Bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisautil.js
.
Okutuuka ku bantu
Omutindo gwa WAI ARIArole="menu"
gutegeeza widget entuufu , naye kino kyetongodde ku menu eziringa enkola ezitandikawo ebikolwa oba emirimu. Menyu za ARIA zisobola okubeeramu ebintu bya menu byokka, ebintu bya menu eby’akabokisi akalaga, ebintu bya menu bya button ya radio, ebibinja bya button za radio, ne sub-menus.
Ku luuyi olulala, ebigwa bya Bootstrap bikoleddwa okuba eby’enjawulo era nga bikozesebwa mu mbeera ez’enjawulo n’ensengeka z’obubonero. Okugeza, kisoboka okukola ebifo ebikka ebirimu ebiyingizibwa ebirala n’ebifuga foomu, gamba ng’ennimiro z’okunoonya oba foomu z’okuyingira. Olw'ensonga eno, Bootstrap tesuubira (oba okwongera mu ngeri ey'otoma) ekintu kyonna ku role
n'ebintu aria-
ebyetaagisa ku menu za ARIA entuufu . Abawandiisi bajja kuba balina okussaamu ebifaananyi bino ebisingawo ebitongole bennyini.
Naye, Bootstrap eyongerako obuwagizi obuzimbibwamu ku nkolagana za menu ya keyboard ezisinga obungi eza bulijjo, gamba ng’obusobozi okutambula mu .dropdown-item
bintu ssekinnoomu ng’okozesa ebisumuluzo bya cursor n’okuggalawo menu ESCn’ekisumuluzo.
Eby’okulabirako
Zinga toggle ya dropdown (button yo oba link yo) ne dropdown menu munda mu .dropdown
, oba elementi endala elangirira position: relative;
. Dropdowns zisobola okutandika okuva <a>
oba <button>
elements okusobola okutuukana obulungi ku byetaago byo ebiyinza okubaawo.
Butaamu emu
Single yonna .btn
esobola okufuulibwa dropdown toggle nga waliwo enkyukakyuka mu markup. Laba engeri gy’oyinza okuziteeka ku nkola n’ebintu byombi <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>
Era nga waliwo <a>
elementi:
<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>
Ekisinga obulungi kino osobola okukikola ne button variant yonna, naawe:
<!-- 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>
Okugabanyaamu bbaatuuni
Mu ngeri y’emu, tonda split button dropdowns nga kumpi markup y’emu nga button emu dropdowns, naye nga kwogasse .dropdown-toggle-split
for for proper spacing around the dropdown caret.
Tukozesa kiraasi eno ey’enjawulo okukendeeza ku horizontal padding
ku buli ludda lwa caret ebitundu 25% n’okuggyawo margin-left
that’s added for regular button dropdowns. Enkyukakyuka ezo ez’enjawulo zikuuma caret ng’eri wakati mu bbaatuuni eyawuddwamu era ziwa ekifo ky’okukuba eky’obunene obutuufu okumpi ne bbaatuuni enkulu.
<!-- 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>
Okugerageranya obunene
Ebintu ebikka wansi bikola ne butaamu eza sayizi zonna, omuli obutambi obugwa wansi obusookerwako n’obw’enjawulo.
<!-- 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>
Endagiriro
Okugwa wansi
Trigger dropdown menus waggulu wa elements nga oyongera .dropup
ku elementi omuzadde.
<!-- 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>
Eddembe ly’okutonnya
Trigger dropdown menus ku ddyo w'ebintu nga oyongera .dropright
ku elementi omuzadde.
<!-- 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>
Okutonnya
Trigger dropdown menus ku kkono w'ebintu nga oyongera .dropleft
ku elementi omuzadde.
<!-- 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>
Ebintu ebiri mu menu
Mu byafaayo ebirimu mu menu egwa wansi byali birina okuba enkolagana, naye ekyo tekikyali bwe kityo ku v4. Kati osobola okukozesa <button>
elements mu dropdowns zo mu kifo kya <a>
s yokka.
<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>
Osobola n'okukola ebintu ebitali bikwatagana ne .dropdown-item-text
. Wulira nga oli waddembe okwongera sitayiro n'ebikozesebwa ebya custom CSS oba ebiwandiiko.
<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>
Obunyiikivu
Yongera .active
ku bintu ebiri mu dropdown okubikola sitayiro nga active .
<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>
Obutesobola
Yongera .disabled
ku bintu mu dropdown okubikola sitayiro nga ebilema .
<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>
Okusengeka menu
Nga bwekiba, menu egwa wansi eteekebwa mu ngeri ey’otoma 100% okuva waggulu ne ku ludda olwa kkono olwa muzadde waayo. Okwongera .dropdown-menu-right
ku a .dropdown-menu
ku ddyo sengeka menu egwa wansi.
<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>
Okulaganya okuddamu
Bw’oba oyagala okukozesa okulaganya okuddamu, lemesa okuteeka mu kifo ekikyukakyuka ng’ogattako data-display="static"
ekintu era okozese ebika by’enkyukakyuka eziddamu.
Okukwataganya ku ddyo menu egwa wansi n'ekifo ekiweereddwa oba ekinene, yongerako .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>
Okukwataganya ku kkono menu egwa wansi n'ekifo ekiweereddwa oba ekinene, yongera .dropdown-menu-right
ne .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>
Weetegereze nti teweetaaga kwongerako kintu data-display="static"
ku buttons ezikka mu navbars, okuva Popper bwetakozesebwa mu navbars.
Ebirimu mu menu
Emitwe gy’omutwe
Okwongerako omutwe okuwandiika ebitundu by'ebikolwa mu menu yonna ekka.
<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>
Abagabanya ebintu
Yawula ebibinja by’ebintu ebikwatagana mu menu n’omugabanya.
<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>
Okuwandiika obubaka
Teeka ekiwandiiko kyonna eky'eddembe munda mu menu egwa wansi n'ebiwandiiko era kozesa ebikozesebwa mu kuteeka ebanga . Weetegereze nti ojja kwetaaga sitayiro endala ez'okugerageranya okuziyiza obugazi bwa 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>
Ffoomu
Teeka foomu munda mu menu egwa wansi, oba gifuule mu menu egwa wansi, era kozesa margin oba padding utilities okugiwa ekifo ekibi ky’oyagala.
<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>
Ebintu ebiyinza okugwa wansi
Kozesa data-offset
oba data-reference
okukyusa ekifo ekigenda okukka.
<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>
Enkozesa
Okuyita mu data attributes oba JavaScript, plugin egwa wansi ekyusa ebirimu ebikwekebwa (dropdown menus) nga ekyusa .show
kiraasi ku muzadde .dropdown-menu
. Attribute data-toggle="dropdown"
yesigamyeko okuggalawo dropdown menus ku ddaala ly'enkola, kale kirungi bulijjo okugikozesa.
$.noop
)
mouseover
ku baana ab’amangu
<body>
ab’ekintu. This admittedly ugly hack is necessary to work around a
quirk in iOS' event delegation , ekiyinza okulemesa tap wonna ebweru w'okugwa okuva ku kutandika koodi eggalawo okugwa. Ekifo ekikka wansi bwe kimala okuggalwa, ebikwaso bino ebirala ebitaliiko kintu kyonna
mouseover
biggyibwawo.
Okuyita mu bikwata ku data
Yongera data-toggle="dropdown"
ku link oba button okukyusa dropdown.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Okuyita mu JavaScript
Kuba ku bigenda okukka wansi ng’oyita mu JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
kikyali kyetaagisa
Nga tofuddeeyo oba oyita dropdown yo ng'oyita mu JavaScript oba mu kifo ky'ekyo okozesa data-api, data-toggle="dropdown"
bulijjo kyetaagisa okubeerawo ku dropdown's trigger element.
Eby’okulondako
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-
, nga mu data-offset=""
.
Erinnya | Okuwandiika | Okukosamu | Okunnyonnyola |
---|---|---|---|
offset | ennamba | olunyiriri | enkola | 0. | Offset ya dropdown okusinziira ku target yaayo. Omulimu bwe gukozesebwa okuzuula offset, guyitibwa n’ekintu ekirimu data ya offset nga ensonga yaakyo esooka. Omulimu gulina okuzzaayo ekintu ekirina ensengeka y’emu. Ekintu ekivaako DOM node kiyisibwa nga ensonga eyokubiri. Okumanya ebisingawo laba Popper's offset docs . |
okukyuusa | boolean | kituufu | Kiriza Dropdown okufuumuuka mu mbeera y'okukwatagana ku elementi y'okujuliza. Okumanya ebisingawo laba Popper's flip docs . |
ensalo | olunyiriri | ekintu | 'omuzadde omuzingo'. | Ensalosalo y'okuziyiza okujjula eya menu egwa wansi. Ekkiriza emiwendo gya 'viewport' , 'window' , 'scrollParent' , oba ekijuliziddwa HTMLElement (JavaScript yokka). Okumanya ebisingawo laba Popper's preventOverflow docs . |
okwebuuza ewalala | olunyiriri | ekintu | 'okukyusakyusa'. | Ekintu ekijuliziddwa mu menu egwa wansi. Akkiriza emiwendo gya 'toggle' , 'parent' , oba ekijuliziddwa HTMLElement. Okumanya ebisingawo laba Popper's referenceObject docs . |
okulaga | akaguwa | 'dynamic'. | Nga bwekiba, tukozesa Popper ku dynamic positioning. Kino lemesa nga olina static . |
popperConfig nga bwe kiri | null | ekintu | tekili mu mateeka | Okukyusa ensengeka ya Popper eya Bootstrap eya bulijjo, laba ensengeka ya Popper |
Weetegereze bwe boundary
kiteekebwa ku muwendo gwonna okuggyako 'scrollParent'
, sitayiro position: static
ekozesebwa ku .dropdown
kibya.
Enkola
Engeri | Okunnyonnyola |
---|---|
$().dropdown('toggle') |
Ekyusa menu egwa wansi eya navbar oba tabbed navigation eweereddwa. |
$().dropdown('show') |
Eraga menu egwa wansi eya navbar oba tabbed navigation eweereddwa. |
$().dropdown('hide') |
Ekweka menu egwa wansi eya navbar oba tabbed navigation eweereddwa. |
$().dropdown('update') |
Ezza obuggya ekifo ky'ekintu ekigwa wansi. |
$().dropdown('dispose') |
Esaanyaawo ekintu ekigwa wansi. |
Ebibaddewo
Ebintu byonna ebigwa wansi bikubwa ku .dropdown-menu
's parent element era birina relatedTarget
eky'obugagga, omuwendo gwakyo gwe toggling anchor element. hide.bs.dropdown
era hidden.bs.dropdown
ebibaddewo birina clickEvent
eky’obugagga (nga ekika ky’ekintu eky’olubereberye kiri click
) ekirimu Ekintu ky’Ekibaddewo eky’ekintu eky’okunyiga.
Omukolo | Okunnyonnyola |
---|---|
show.bs.dropdown |
Ekintu kino kikuba amangu ddala nga enkola ya show instance eyitiddwa. |
shown.bs.dropdown |
Ekintu kino kikubwa nga ekigwa kikoleddwa okulabika eri omukozesa (kijja kulinda enkyukakyuka za CSS, okuggwa). |
hide.bs.dropdown |
Ekintu kino kikubwa amangu ddala nga enkola ya hide instance eyitiddwa. |
hidden.bs.dropdown |
Ekintu kino kikubwa nga ekigwa kiwedde okukwekebwa okuva eri omukozesa (kijja kulinda enkyukakyuka za CSS, okuggwa). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})