Dropdowns
Aktivite kontèks superpositions pou montre lis lyen ak plis ankò ak plugin Bootstrap dropdown la.
Apèsi sou lekòl la
Dropdowns yo ka chanje, superpozisyon kontèks pou montre lis lyen ak plis ankò. Yo ap fè entèaktif ak enkli ladan li Bootstrap dropdown JavaScript plugin. Yo ap aktive pa klike, pa pa elikopte; sa a se yon desizyon konsepsyon entansyonèl .
Dropdowns yo bati sou yon bibliyotèk twazyèm pati, Popper , ki bay pwezante dinamik ak deteksyon Viewport. Asire ou ke ou mete popper.min.js anvan JavaScript Bootstrap a oswa itilize bootstrap.bundle.min.js
/ bootstrap.bundle.js
ki gen Popper. Popper pa itilize pou pozisyon dropdowns nan navbars menm si kòm pwezante dinamik pa obligatwa.
Si w ap konstwi JavaScript nou an soti nan sous, li mande pouutil.js
.
Aksesiblite
Estanda WAI ARIArole="menu"
defini yon widje aktyèl , men sa a se espesifik nan meni tankou aplikasyon ki deklanche aksyon oswa fonksyon. Meni ARIA kapab genyen sèlman atik meni, atik meni kaz, atik meni bouton radyo, gwoup bouton radyo, ak sou-meni.
Dropdowns Bootstrap yo, nan lòt men an, yo fèt yo dwe jenerik ak aplikab nan yon varyete sitiyasyon ak estrikti maketing. Pa egzanp, li posib pou kreye dropdowns ki genyen lòt entrées ak kontwòl fòm, tankou jaden rechèch oswa fòm konekte. Pou rezon sa a, Bootstrap pa atann (ni otomatikman ajoute) nenpòt nan role
ak aria-
atribi ki nesesè pou meni ARIA vre. Otè yo pral gen ladan yo atribi pi espesifik sa yo tèt yo.
Sepandan, Bootstrap ajoute sipò entegre pou pifò entèraksyon estanda klavye meni, tankou kapasite pou deplase nan .dropdown-item
eleman endividyèl yo lè l sèvi avèk kle kurseur yo epi fèmen meni an ak ESCkle a.
Egzanp yo
Anvlope bouton dewoulman an (bouton ou oswa lyen ou) ak meni deroule a nan .dropdown
, oswa yon lòt eleman ki deklare position: relative;
. Dropdowns yo ka deklanche soti nan <a>
oswa <button>
eleman yo pi byen anfòm bezwen potansyèl ou yo.
Bouton sèl
Nenpòt sèl .btn
ka tounen yon deroulan ak kèk chanjman maketing. Men ki jan ou ka mete yo nan travay ak nenpòt <button>
eleman:
<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>
Ak <a>
eleman:
<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>
Pi bon pati a se ou ka fè sa ak nenpòt variant bouton tou:
<!-- 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>
Split bouton
Menm jan an tou, kreye dewoulman bouton fann ak nòmalman maketing la menm jan ak dropdown bouton sèl, men ak adisyon a .dropdown-toggle-split
pou bon espas alantou deroulan a.
Nou itilize klas siplemantè sa a pou redwi orizontal la padding
sou chak bò priz la pa 25% epi retire sa margin-left
ki te ajoute pou dewoulman bouton regilye yo. Chanjman siplemantè sa yo kenbe caret la santre nan bouton fann an epi bay yon zòn frape ki pi apwopriye akote bouton prensipal la.
<!-- 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>
Dimansyon
Bouton dropdowns travay ak bouton nan tout gwosè, ki gen ladan bouton deroule default ak divize.
<!-- 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>
Direksyon
Dropup
Deklanche meni deroulan anlè eleman yo lè w ajoute .dropup
nan eleman paran an.
<!-- 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
Deklanche meni dewoulan adwat eleman yo lè w ajoute .dropright
nan eleman paran an.
<!-- 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
Deklanche meni dewoulman nan bò gòch eleman yo lè w ajoute .dropleft
nan eleman paran an.
<!-- 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>
Atik meni yo
Istorikman kontni meni yo te dwe lyen, men sa a pa ka a ankò ak v4. Koulye a, ou ka opsyonèlman itilize <button>
eleman nan dropdowns ou olye pou yo jis <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>
Ou kapab tou kreye atik dropdown ki pa entèaktif ak .dropdown-item-text
. Ezite style pi lwen ak CSS koutim oswa sèvis piblik tèks.
<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>
Aktif
Ajoute .active
nan atik ki nan deroule a pou style yo kòm aktif .
<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>
Andikape
Ajoute .disabled
atik ki nan deroule a pou style yo kòm andikape .
<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>
Aliyman meni
Pa default, yon meni deroulant otomatikman pozisyone 100% soti nan tèt la ak sou bò gòch la nan paran li. Ajoute .dropdown-menu-right
yon .dropdown-menu
a dwat aliman meni an deroulant.
<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>
Aliyman reponn
Si ou vle sèvi ak aliyman reponn, enfim pwezante dinamik lè w ajoute data-display="static"
atribi a epi sèvi ak klas varyasyon ki reponn yo.
Pou fè aliman dwat meni deroule a ak pwen rupture yo bay la oswa pi gwo, ajoute .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>
Pou fè aliman bò gòch meni deroule a ak pwen rupture yo bay la oswa pi gwo, ajoute .dropdown-menu-right
ak .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>
Remake byen ke ou pa bezwen ajoute yon data-display="static"
atribi nan bouton dropdown nan navbars, paske Popper pa itilize nan navbars.
Kontni meni an
Tèt
Ajoute yon header pou make seksyon aksyon yo nan nenpòt meni deroulant.
<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>
Divizeur
Separe gwoup atik meni ki gen rapò ak yon divizyon.
<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>
Tèks
Mete nenpòt tèks fòm lib nan yon meni ki gen tèks epi sèvi ak sèvis piblik espas . Remake byen ke ou pral gen anpil chans bezwen estil gwosè adisyonèl pou limite lajè meni an.
<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>
Fòm
Mete yon fòm nan yon meni deroulant, oswa fè li nan yon meni deroulant, epi sèvi ak maj oswa sèvis piblik padding pou ba li espas negatif ou bezwen an.
<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>
Opsyon dropdown
Sèvi ak data-offset
oswa data-reference
pou chanje kote dropdown la.
<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>
Itilizasyon
Atravè atribi done oswa JavaScript, Plugin deroule a chanje kontni kache (meni deroulant) lè li chanje .show
klas la sou paran an .dropdown-menu
. Se data-toggle="dropdown"
atribi a konte sou pou fèmen meni deroulan nan yon nivo aplikasyon, kidonk li se yon bon lide pou toujou sèvi ak li.
$.noop
)
vid mouseover
nan pitit imedya
<body>
eleman an. Sa a se vreman lèd Hack nesesè yo travay alantou yon
kirk nan delegasyon evènman iOS ' , ki ta otreman anpeche yon tiyo nenpòt kote andeyò deroule a soti nan deklanche kòd la ki fèmen dropdown la. Yon fwa ke dropdown la fèmen, moun kap okipe lòt vid sa
mouseover
yo retire.
Via atribi done yo
Ajoute data-toggle="dropdown"
nan yon lyen oswa bouton pou aktive yon deroulan.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Via JavaScript
Rele dropdowns yo atravè JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
toujou obligatwa
Kèlkeswa si wi ou non ou rele dropdown ou atravè JavaScript oswa olye de itilize done-api a, data-toggle="dropdown"
se toujou oblije prezan sou eleman deklanche dropdown la.
Opsyon
Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-
, tankou nan data-offset=""
.
Non | Kalite | Default | Deskripsyon |
---|---|---|---|
konpanse | nimewo | fisèl | fonksyon | 0 | Konsantrasyon deroule a parapò ak sib li yo. Lè yo itilize yon fonksyon pou detèmine konpanse a, yo rele l ak yon objè ki gen done konpanse a kòm premye agiman li. Fonksyon an dwe retounen yon objè ki gen menm estrikti a. Se eleman deklanche ne DOM la pase kòm dezyèm agiman an. Pou plis enfòmasyon, al gade nan Docs Offset Popper la . |
baskile | booleyen | vre | Pèmèt Dropdown baskile nan ka ta gen yon sipèpoze sou eleman referans la. Pou plis enfòmasyon, al gade nan Dok Popper a . |
fwontyè | fisèl | eleman | 'scrollParent' | Limit kontrent debòde nan meni an deroulant. Aksepte valè 'viewport' , 'window' , 'scrollParent' , oswa yon referans HTMLElement (JavaScript sèlman). Pou plis enfòmasyon, gade nan docs preventOverflow Popper a . |
referans | fisèl | eleman | 'bale' | Eleman referans nan meni an deroulant. Aksepte valè 'toggle' , 'parent' , oswa yon referans HTMLElement. Pou plis enfòmasyon, gade nan docs referenceObject Popper la . |
ekspozisyon | fisèl | 'dinamik' | Pa default, nou itilize Popper pou pwezante dinamik. Enfim sa a ak static . |
popperConfig | nil | objè | nil | Pou chanje konfigirasyon Popper default Bootstrap la, gade konfigirasyon Popper la |
Remake byen lè boundary
yo mete nan nenpòt valè ki pa 'scrollParent'
, style position: static
la aplike nan .dropdown
veso a.
Metòd
Metòd | Deskripsyon |
---|---|
$().dropdown('toggle') |
Aktive meni dewoulman yon ba nav oswa navigasyon onglet yo bay. |
$().dropdown('show') |
Montre meni dewoulman yon navbar oswa navigasyon onglet yo bay. |
$().dropdown('hide') |
Kache meni dewoulman yon ba nav oswa navigasyon onglet yo bay. |
$().dropdown('update') |
Mete ajou pozisyon deroule yon eleman. |
$().dropdown('dispose') |
Detwi deroule yon eleman. |
Evènman
Tout evènman dropdown yo tire nan .dropdown-menu
eleman paran yo epi yo gen yon relatedTarget
pwopriyete, ki gen valè se eleman jete lank baskile. hide.bs.dropdown
ak hidden.bs.dropdown
evènman yo gen yon clickEvent
pwopriyete (sèlman lè kalite evènman orijinal la se click
) ki gen yon Objè Evènman pou evènman an klike sou.
Evènman | Deskripsyon |
---|---|
show.bs.dropdown |
Evènman sa a dife imedyatman lè yo rele metòd montre egzanp lan. |
shown.bs.dropdown |
Evènman sa a te revoke lè deroule a te fè vizib itilizatè a (ap tann tranzisyon CSS, pou konplete). |
hide.bs.dropdown |
Evènman sa a revoke imedyatman lè yo te rele metòd egzanp kache. |
hidden.bs.dropdown |
Evènman sa a revoke lè dropdown la fini kache pou itilizatè a (ap tann tranzisyon CSS, pou konplete). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})