Nusiwo wotsɔna ƒua gbe
Trɔ nya siwo ƒo xlãe ƒe nutsyɔtsyɔwo hena kadodowo ƒe xexlẽdzesiwo kple bubuwo ɖeɖefia kple Bootstrap ƒe ƒuƒoƒoa.
Kpɔɖeŋunyagbɔgblɔ
Dropdowns nye toggleable, contextual overlays hena kadodowo ƒe xexlẽdzesiwo ɖeɖefia kple bubuwo. Wowɔ wo be woawɔ nu kple Bootstrap ƒe JavaScript ƒe kpeɖeŋutɔ si le eme. Wotrɔa asi le wo ŋu to asiƒoƒo ɖe wo dzi me, ke menye to asiƒoƒo ɖe wo dzi me o; esia nye nyametsotso si woɖo koŋ wɔ le aɖaŋuwɔwɔ ŋu .
Wotu nusiwo wotsɔna ƒua gbe ɖe ame etɔ̃lia ƒe agbalẽdzraɖoƒe aɖe dzi, si nye Popper , si naa teƒe si wowɔa dɔ le kple nukpɔkpɔ ƒe ʋɔtruwo didi. Kpɔ egbɔ be yede popper.min.js do ŋgɔ na Bootstrap ƒe JavaScript alo zã bootstrap.bundle.min.js
/ bootstrap.bundle.js
si me Popper le. Popper mezãna tsɔ ɖoa dropdowns ɖe navbars me togbɔ be abe dynamic positioning mehiã o ene.
Ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia beutil.js
.
Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ
WAI ARIA ƒe dzidzenu ɖe role="menu"
widget ŋutɔŋutɔ gɔme , gake esia nye menu siwo le abe dɔwɔwɔ ene siwo ʋãa nuwɔna alo dɔwɔwɔwo koŋ. ARIA ƒe nuɖuɖuwo ate ŋu anye nusiwo le menu me, aɖaka me nu siwo le aɖaka me, radio ƒe abɔta ƒe nuɖuɖu ƒe akpawo, radio ƒe abɔta ƒe ƒuƒoƒo, kple menu suewo ko.
Gake wowɔ Bootstrap ƒe dropdowns ya be woanye esiwo wozãna le mɔ vovovowo nu eye woate ŋu azã wo ɖe nɔnɔme vovovowo kple dzesideɖoɖowo me. Le kpɔɖeŋu me, anya wɔ be woawɔ nusiwo woatsɔ ade eme siwo me nyatakaka bubuwo kple agbalẽviwo dzi kpɔkpɔ le, abe didiƒewo alo agbalẽvi siwo dzi woato age ɖe eme ene. Le susu sia ta la, Bootstrap mekpɔ mɔ (alo tsɔe kpe ɖe eŋu le eɖokui si) role
kple aria-
nɔnɔme siwo hiã na ARIA ƒe nuɖuɖu vavãwo dometɔ aɖeke o. Ele be agbalẽŋlɔlawo ŋutɔ nade nɔnɔme siawo siwo le tẽ wu la eme.
Ke hã, Bootstrap tsɔa kpekpeɖeŋu si wotu ɖe eme kpena ɖe keyboard menu ƒe kadodo siwo wozãna ɖaa ƒe akpa gãtɔ ŋu, abe ŋutete si le ame si be wòaʋu to .dropdown-item
nu ɖekaɖekawo me to cursor keys zazã me eye nàtu menu la kple ESCkey la ene.
Kpɔɖeŋuwo
Kpe fli si le fli dzi ƒe toggle (wò abɔta alo kadodo) kple nu si le fli dzi la ɖe .dropdown
, alo nu bubu si ɖe gbeƒã position: relative;
. Woate ŋu aʋã dropdowns tso <a>
alo <button>
elements be wòasɔ ɖe wò nuhiahiã siwo ate ŋu adzɔ nu nyuie wu.
Abɔta ɖeka
Woateŋu atrɔ ɖekaɖeka ɖesiaɖe .btn
wòazu dropdown toggle kple dzesidede tɔtrɔ aɖewo. Alesi nàte ŋu atsɔ wo ade dɔwɔwɔ me kple nu eveawo dometɔ ɖesiaɖee nye esi <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>
Eye kple <a>
nu veviwo:
<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>
Akpa nyuitɔ kekeakee nye be àte ŋu awɔ esia kple button variant ɖesiaɖe, hã:
<!-- 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>
Mamã ƒe dzesi
Nenema ke wɔ split button dropdowns kple dzeside ɖeka kloe abe button ɖeka dropdowns ene, gake nàtsɔe akpe ɖe eŋu .dropdown-toggle-split
hena dometsotso nyuitɔ ƒo xlã dropdown caret la.
Míezãa klass bubu sia tsɔ ɖea horizontal padding
si le caret la ƒe akpa eveawo dzi kpɔtɔna 25% eye míeɖea margin-left
that’s added for regular button dropdowns ɖa. Tɔtrɔ mawo kpee la nana caret la nɔa titina le abɔta si woma la me eye wònaa teƒe si woate ŋu aƒoe si ƒe lolome sɔ wu le abɔta gã la xa.
<!-- 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>
Sizing ƒe lolome
Abɔta siwo le tsia dzi la wɔa dɔ kple abɔta siwo ƒe lolome le vovovo, siwo dometɔ aɖewoe nye abɔta siwo woɖo ɖi kple esiwo woma ɖe akpa vovovowo me.
<!-- 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>
Mɔfiamewo
Dropup ƒe ʋuʋu
Dze nu siwo le fli dzi la gɔme le elementwo tame to etsɔtsɔ kpe .dropup
ɖe dzila ƒe akpaa ŋu me.
<!-- 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 ƒe gomenɔamesi
Dze nusiwo le fli dzi le elementawo ƒe ɖusime to tsɔtsɔ kpe .dropright
ɖe dzila element la ŋu me.
<!-- 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 ƒe ƒuƒoƒo
Dze nusiwo le fli dzi le elementawo ƒe miame to tsɔtsɔ kpe .dropleft
ɖe dzila element la ŋu me.
<!-- 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>
Nu siwo le menu la me
Le ŋutinya me la , ele be nu siwo le fli dzi la nanye kadodowo, gake meganye nenema le v4 gome o. Fifia àteŋu azã <button>
elements le wò dropdowns me le wò tiatia me ɖe <a>
s ko teƒe.
<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>
Àte ŋu awɔ nusiwo mewɔa dɔ kple wo nɔewo o hã kple .dropdown-item-text
. Miate ŋu awɔ atsyã geɖe wu faa kple CSS alo nuŋɔŋlɔ ƒe dɔwɔnu siwo wowɔ ɖe ɖoɖo nu.
<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>
Le dɔwɔm
Tsɔe kpe .active
ɖe nusiwo le fli si le fli dzi la ŋu be nàwɔ woƒe atsyã be wole dɔ wɔm .
<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>
Si me woɖe dzo le
Tsɔe kpe .disabled
ɖe nusiwo le fli si le fli dzi la ŋu be nàwɔ woƒe atsyã abe nuwɔametɔwo ene .
<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>
Menu ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu
Le gɔmedzedzea me la, woɖoa nusiwo le tsia dzi la ɖe teƒe si le eɖokui si 100% tso etame kple edzila ƒe miame. Tsɔ kpe .dropdown-menu-right
ɖe a .dropdown-menu
ŋu yi ɖusime ɖo fli si le fli dzi la ɖe ɖoɖo nu.
<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>
Ðoɖowɔwɔ ɖe ɖoɖo nu
Ne èdi be yeazã ɖoɖowɔwɔ ɖe ɖoɖo nu la, wɔ ɖoɖo si trɔna la nuwɔametɔe to nɔnɔmea tsɔtsɔ kpee me data-display="static"
eye nàzã ŋuɖoɖo ƒe tɔtrɔ ƒe hatsotsowo.
Ne èdi be yeaɖo fli si le fli dzi la ɖe ɖusime kple breakpoint si wona alo esi lolo wu la, tsɔ kpe ɖe eŋu .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>
Ne èdi be yeaɖo miame ƒe fli si le fli dzi la ɖe ɖoɖo nu kple breakpoint si wona alo esi lolo wu la, tsɔ .dropdown-menu-right
kple .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>
De dzesii be mehiã be nàtsɔ data-display="static"
nɔnɔme aɖe akpe ɖe ʋuƒo siwo le navbarwo me ŋu o, elabena womezãa Popper le navbarwo me o.
Menu me nyawo
Tanyawo
Tsɔ tanya kpee be nàde dzesi nuwɔna ƒe akpawo le nu ɖesiaɖe si le fli dzi me.
<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>
Amewo mamãnuwo
Tsɔ numamãnu ɖe nuɖuɖu siwo do ƒome kple wo nɔewo ƒe ƒuƒoƒowo me.
<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>
Nuŋɔɖi
Da nuŋɔŋlɔ ɖesiaɖe si le ablɔɖe me ɖe menu si dzi woŋlɔ nu ɖo la me eye nàzã dometsotso ƒe dɔwɔnuwo . De dzesii be anɔ eme be àhiã lolome ƒe atsyã bubuwo be nàxe mɔ ɖe nuɖuɖua ƒe kekeme nu.
<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>
Kpekpeɖeŋugbalẽviwo
De agbalẽvi aɖe nu siwo le fli dzi la me, alo nàwɔe wòazu nu siwo le fli dzi, eye nàzã margin alo padding utilities atsɔ ana teƒe manyomanyo si nèhiã lae.
<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>
Tiatia siwo woate ŋu azã le fli dzi
Zã data-offset
alo data-reference
nàtsɔ atrɔ teƒe si nàɖe nu le.
<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>
Zãzã
To data attributes alo JavaScript dzi la, plugin la trɔa nya ɣaɣlawo (nu siwo le fli dzi) to asitɔtrɔ le .show
klass la ŋu le dzila la dzi .dropdown-menu
. Woɖoa data-toggle="dropdown"
ŋu ɖe nɔnɔmea ŋu hena nutsotso siwo le fli dzi le dɔwɔwɔ ƒe ɖoɖo aɖe dzi, eyata anyo be nàzãe ɣesiaɣi.
$.noop
)
kpena ɖe element mouseover
la ƒe viwo ŋu enumake
. <body>
This admittedly ugly hack is necessary to work around a
quirk in iOS’ event delegation , si ne menye nenema o la, axe mɔ na tap le afisiafi le dropdown la godo be wòagaʋã code si xea dropdown la o. Ne wonya tu nusi wotsɔna ƒua gbe la ko la, woɖea asiléƒe ƒuƒlu siawo siwo wotsɔ kpe ɖe eŋu
mouseover
la ɖa.
To nyatakaka ƒe nɔnɔmewo dzi
Tsɔe kpe data-toggle="dropdown"
ɖe kadodo alo abɔta ŋu be nàtrɔ asi le nya aɖe ŋu.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
To JavaScript dzi
Yɔ nusiwo le fli dzi la to JavaScript dzi:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
wogahiã kokoko
Eɖanye be èyɔ wò dropdown la to JavaScript dzi alo nèzã data-api boŋ o, data-toggle="dropdown"
ehiã ɣesiaɣi be nànɔ dropdown la ƒe trigger element la dzi.
Tiatiawɔblɔɖewo
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-
, abe alesi wòle le data-offset=""
.
Ŋkɔ | Ƒomevi | Gᴐmedzeƒe | Nuɖᴐɖᴐ |
---|---|---|---|
offset ƒe ƒuƒoƒo | xexlẽdzesi | kaƒoƒo | wᴐ dᴐ | 0. | Offset of the dropdown ne wotsɔe sɔ kple eƒe taɖodzinu. Ne wozã dɔwɔwɔ aɖe tsɔ nya offset la, woyɔnɛ kple nusi me offset data le abe eƒe nyaʋiʋli gbãtɔ ene. Ele be dɔwɔwɔa natrɔ nusi ƒe wɔwɔme le ɖeka. Wotsɔa nusi ʋãa nu DOM node la toa eme abe nyaʋiʋli evelia ene. Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe offset docs . |
ti kpo | boolean ƒe ƒuƒoƒo | nyateƒe | Ðe mɔ na Dropdown be wòatrɔ nenye be eƒo xlã nufiame ƒe akpaa. Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe flip docs . |
liƒo dzi | kaƒoƒo | na | 'agbalẽ xatsaxatsa dzila'. | Overflow mɔxexeɖedɔléle liƒo na dropdown menu. Xɔ 'viewport' , 'window' , 'scrollParent' , alo HTMLElement ƒe nufiame ƒe asixɔxɔwo (JavaScript ɖeɖeko). Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe preventOverflow docs . |
ɖeɖe fiã | kaƒoƒo | na | 'trɔ asi le eŋu'. | Nufiame ƒe akpa si le nusiwo le fli dzi la me. Lɔ̃ ɖe 'toggle' , 'parent' , alo HTMLElement ƒe nufiame ƒe asixɔxɔwo dzi. Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe referenceObject docs . |
ɖeɖe fia | ka | 'ŋusẽtɔ'. | Le gɔmedzedzea me la, míezãa Popper hena teƒeɖoɖo si trɔna. Tsɔ esia wɔ dɔe kple static . |
popper ƒe Ðoɖowɔɖi | null | nu | ƒuƒlu | Ne èdi be yeatrɔ Bootstrap ƒe Popper ƒe ɖoɖowɔɖi gbãtɔ la, kpɔ Popper ƒe ɖoɖowɔɖi |
De dzesii ne boundary
woɖoe ɖe asixɔxɔ ɖesiaɖe si menye 'scrollParent'
, o la, wozãa atsyã position: static
la ɖe .dropdown
nugoe la ŋu.
Mɔnuwo
Nuwɔmɔnu | Nuɖᴐɖᴐ |
---|---|
$().dropdown('toggle') |
Trɔa navbar alo tabbed navigation aɖe si wona la ƒe dropdown menu. |
$().dropdown('show') |
Fia navbar alo tabbed navigation si wona ƒe menu si le tsia dzi. |
$().dropdown('hide') |
Ɣla navbar alo tabbed navigation si wona ƒe menu si le tsia dzi. |
$().dropdown('update') |
Trɔ asi le element aɖe ƒe dropdown ƒe nɔƒe ŋu. |
$().dropdown('dispose') |
Egblẽa nu le element aɖe ƒe dropdown ŋu. |
Nudzɔdzɔwo
Wodoa nudzɔdzɔ siwo katã le tsia dzi la ɖe .dropdown-menu
's dzila ƒe akpaa dzi eye nɔnɔme aɖe le wo si relatedTarget
, si ƒe asixɔxɔ nye toggling anchor element. hide.bs.dropdown
eye hidden.bs.dropdown
nudzɔdzɔwo ƒe nɔnɔme aɖe le wo si clickEvent
(ne nudzɔdzɔ gbãtɔ ƒe ƒomevi nye click
) si me Nudzɔdzɔ ƒe Nu le na nudzɔdzɔ si wozi.
Nudzᴐdzᴐ | Nuɖᴐɖᴐ |
---|---|
show.bs.dropdown |
Nudzɔdzɔ sia doa dzo enumake ne woyɔ show instance mɔnu la. |
shown.bs.dropdown |
Woɖea nudzɔdzɔ sia ne wowɔ dropdown la be wòadze na zãla (alala CSS ƒe tɔtrɔwo, be woawu enu). |
hide.bs.dropdown |
Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hide instance mɔnu la. |
hidden.bs.dropdown |
Woɖea nudzɔdzɔ sia ne wowu dropdown la ɣla ɖe zãla la nu (alala CSS ƒe tɔtrɔwo, be woawu enu). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})