Dropdowns
Toggle kontextuell Iwwerlagerungen fir Lëschte vu Linken ze weisen a méi mam Bootstrap Dropdown Plugin.
Iwwersiicht
Dropdowns sinn togglebar, kontextuell Iwwerlagerungen fir Lëschte vu Linken ze weisen a méi. Si ginn interaktiv gemaach mam abegraff Bootstrap Dropdown JavaScript Plugin. Si ginn duerch Klick gekippt, net duerch Schweef; dëst ass eng virsiichteg Designdecisioun .
Dropdowns ginn op enger Drëtt Partei Bibliothéik gebaut, Popper , déi dynamesch Positionéierung an Viewport Detektioun ubitt. Gitt sécher datt Dir Popper.min.js virum Bootstrap's JavaScript enthält oder benotzt bootstrap.bundle.min.js
/ bootstrap.bundle.js
déi Popper enthält. Popper gëtt net benotzt fir Dropdowns an Navbars ze positionéieren awer well dynamesch Positionéierung net erfuerderlech ass.
Wann Dir eis JavaScript aus der Quell baut, brauchutil.js
et .
Accessibilitéit
De WAI ARIA Standard definéiert en aktuellen role="menu"
Widget , awer dëst ass spezifesch fir Applikatiounsähnlech Menüen déi Aktiounen oder Funktiounen ausléisen. ARIA Menue kënnen nëmmen Menü Elementer enthalen, Checkbox Menü Elementer, Radio Button Menü Elementer, Radio Button Gruppen, an Ënnermenüen.
Dem Bootstrap seng Dropdowns, op der anerer Säit, sinn entwéckelt fir generesch ze sinn an applicabel op eng Vielfalt vu Situatiounen a Markupstrukturen. Zum Beispill ass et méiglech Dropdowns ze kreéieren déi zousätzlech Inputen a Formkontrolle enthalen, sou wéi Sichfelder oder Loginformen. Aus dësem Grond erwaart Bootstrap keng vun den role
an aria-
Attributer déi fir richteg ARIA Menüen erfuerderlech sinn (och net automatesch derbäi). Autoren mussen dës méi spezifesch Attributer selwer enthalen.
Wéi och ëmmer, Bootstrap füügt gebaut-an Ënnerstëtzung fir déi meescht Standard Tastaturmenü Interaktiounen, sou wéi d'Fäegkeet fir duerch eenzel .dropdown-item
Elementer mat de Cursorschlësselen ze bewegen an de Menü mat dem ESCSchlëssel zouzemaachen.
Beispiller
Wickelt den Dropdown-Taggle (Äre Knäppchen oder Link) an den Dropdown-Menü bannent .dropdown
, oder en anert Element dat deklaréiert position: relative;
. Dropdowns kënnen aus <a>
oder <button>
Elementer ausgeléist ginn fir Är potenziell Bedierfnesser besser ze passen.
Single Knäppchen
All Single .btn
kann an e Dropdown Toggle ëmgewandelt ginn mat e puer Markup Ännerungen. Hei ass wéi Dir se mat entweder <button>
Elementer setzen kënnt:
<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>
A mat <a>
Elementer:
<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>
Dee beschten Deel ass datt Dir dëst och mat all Knäppchenvariant maache kënnt:
<!-- 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 Knäppchen
Ähnlech erstellt Splitknäppchen Dropdowns mat quasi déiselwecht Markup wéi Single Button Dropdowns, awer mat der Zousatz vu .dropdown-toggle-split
fir richteg Abstand ronderëm den Dropdown Caret.
Mir benotzen dës extra Klass fir d'horizontal padding
op béide Säiten vun der caret ze reduzéieren mat 25% an ewechzehuelen déi margin-left
fir regelméisseg Knäppchen dropdowns dobäi ass. Déi extra Ännerunge behalen de Caret am Spaltknäppchen zentréiert a liwweren e méi passend Gréissten Hitgebitt nieft dem Haaptknäppchen.
<!-- 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>
Gréisst
Button Dropdowns funktionnéieren mat Knäppercher vun alle Gréissten, dorënner Standard a Split Dropdown Knäppercher.
<!-- 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>
Richtungen
Dropup
Ausléiser Dropdown-Menüen iwwer Elementer andeems Dir .dropup
dem Elterendeel bäidréit.
<!-- 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
Ausléiser Dropdown-Menüen op der rietser Säit vun den Elementer andeems Dir .dropright
op den Elterendeel bäidréit.
<!-- 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
Ausléiser Dropdown-Menüen op der lénker Säit vun den Elementer andeems Dir .dropleft
dem Elterendeel bäidréit.
<!-- 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>
Menu Elementer
Historesch huet d'Dropdown-Menü Inhalter misse Linken sinn, awer dat ass net méi de Fall mat v4. Elo kënnt Dir optional <button>
Elementer an Ären Dropdowns benotzen anstatt just <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>
Dir kënnt och net-interaktiven Dropdown-Elementer mat .dropdown-item-text
. Fillt Iech gratis weider ze styléieren mat personaliséierten CSS oder Text Utilities.
<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>
Aktiv
Füügt .active
Artikelen am Dropdown -Menü fir se als aktiv ze stiléieren .
<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>
Behënnert
Füügt .disabled
un Artikelen am Dropdown fir se als behënnert ze stiléieren .
<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 Ausrichtung
Par défaut gëtt en Dropdown-Menü automatesch 100% vun uewen a laanscht déi lénks Säit vu sengem Elterendeel positionéiert. Füügt .dropdown-menu-right
op eng .dropdown-menu
riets ausgeriicht den Dropdown-Menü.
<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>
Reaktiounsfäeger Ausriichtung
Wann Dir reaktiounsfäeger Ausriichtung benotze wëllt, deaktivéiert dynamesch Positionéierung andeems Dir den data-display="static"
Attribut bäidréit a benotzt déi reaktiounsfäeg Variatiounsklassen.
Fir den Dropdown-Menü richteg auszegläichen mat dem gegebene Breakpunkt oder méi grouss, füügt .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>
Fir den Dropdown-Menü lénks mat dem gegebene Breakpunkt oder méi grouss auszegläichen, füügt .dropdown-menu-right
a .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>
Bedenkt datt Dir keen data-display="static"
Attribut un Dropdown-Knäppercher an Navbars addéiere musst, well Popper net an Navbars benotzt gëtt.
Menu Inhalt
Header
Füügt en Header fir Sektiounen vun Aktiounen an all Dropdown-Menü ze markéieren.
<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>
Dividers
Trennt Gruppe vu verwandte Menüartikele mat engem Trenndeel.
<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>
Text
Plaz all freeform Text an engem Dropdown-Menü mat Text a benotzt Abstands-Utilities . Bedenkt datt Dir wahrscheinlech zousätzlech Gréisststiler braucht fir d'Menübreet ze beschränken.
<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>
Formen
Setzt e Formulaire an engem Dropdown-Menü, oder maacht et an en Dropdown-Menü, a benotzt Margin- oder Padding-Utilities fir et den negativen Raum ze ginn deen Dir braucht.
<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>
Dropdown Optiounen
Benotzt data-offset
oder data-reference
fir d'Plaz vum Dropdown ze änneren.
<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>
Benotzung
Iwwer Dateattributer oder JavaScript wiesselt den Dropdown-Plugin verstoppt Inhalt (Dropdown-Menüen) andeems d' .show
Klass op den Elterendeel wiesselt .dropdown-menu
. D' data-toggle="dropdown"
Attributer gëtt ugewisen fir Dropdown-Menüen op engem Applikatiounsniveau zouzemaachen, also ass et eng gutt Iddi et ëmmer ze benotzen.
$.noop
)
mouseover
Handler un déi direkt Kanner vum
<body>
Element. Dësen zouginn ellent Hack ass néideg fir ëm e
Quirk an der iOS Event Delegatioun ze schaffen , wat soss verhënnert datt e Krunn iergendwou ausserhalb vum Dropdown de Code ausléist deen den Dropdown zoumaacht. Wann den Dropdown zougemaach ass, ginn dës zousätzlech eidel
mouseover
Handler geläscht.
Via daten Attributer
Füügt data-toggle="dropdown"
e Link oder Knäppchen fir en Dropdown ze wiesselen.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Iwwer JavaScript
Rufft d'Dropdowns iwwer JavaScript un:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
nach néideg
Egal ob Dir Ären Dropdown iwwer JavaScript nennt oder amplaz den Data-APi benotzt, data-toggle="dropdown"
ass ëmmer erfuerderlech um Ausléiserelement vum Dropdown präsent ze sinn.
Optiounen
Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-
, wéi an data-offset=""
.
Numm | Typ | Default | Beschreiwung |
---|---|---|---|
offset | Zuel | streng | Funktioun | 0 | Offset vum Dropdown relativ zu sengem Zil. Wann eng Funktioun benotzt gëtt fir den Offset ze bestëmmen, gëtt se mat engem Objet genannt, deen d'Offsetdaten als säin éischten Argument enthält. D'Funktioun muss en Objet mat der selwechter Struktur zréckginn. Den Ausléiserelement DOM Node gëtt als zweet Argument weidergeleet. Fir méi Informatioun kuckt op dem Popper seng Offset Docs . |
flipp | boolesch | wouer | Erlaabt den Dropdown ze flippen am Fall vun enger Iwwerlappung um Referenzelement. Fir méi Informatioun, kuckt op de Popper's Flip Docs . |
Grenz | streng | element | 'scrollParent' | Iwwerschwemmungsgrenze vum Dropdown-Menü. Akzeptéiert d'Wäerter vun 'viewport' , 'window' , 'scrollParent' oder eng HTMLElement Referenz (nëmmen JavaScript). Fir méi Informatioun, kuckt op Popper's preventOverflow Dokumenter . |
Referenz | streng | element | 'schalten' | Referenzelement vum Dropdown-Menü. Akzeptéiert d'Wäerter vun 'toggle' , 'parent' , oder eng HTMLElement Referenz. Fir méi Informatioun, kuckt op dem Popper seng ReferenzObject Docs . |
affichéieren | String | 'dynamesch' | Par défaut benotze mir Popper fir dynamesch Positionéierung. Desaktivéiere dëst mat static . |
popperConfig | null | Objet | null | Fir d'Standard Popper Configuratioun vum Bootstrap z'änneren, kuckt d' Popper Konfiguratioun |
Notéiert wann boundary
op all Wäert anescht wéi gesat 'scrollParent'
gëtt, gëtt de Stil position: static
op de .dropdown
Container applizéiert.
Methoden
Method | Beschreiwung |
---|---|
$().dropdown('toggle') |
Wiesselt den Dropdown-Menü vun enger bestëmmter Navbar oder Tabbed Navigatioun. |
$().dropdown('show') |
Weist den Dropdown-Menü vun enger bestëmmter Navbar oder Tabbed Navigatioun. |
$().dropdown('hide') |
Verstoppt den Dropdown-Menü vun enger bestëmmter Navbar oder Tabbed Navigatioun. |
$().dropdown('update') |
Aktualiséiert d'Positioun vun engem Element dropdown. |
$().dropdown('dispose') |
Zerstéiert den Dropdown vun engem Element. |
Evenementer
All Dropdown-Evenementer ginn op d' .dropdown-menu
Elteren-Element gebrannt an hunn e relatedTarget
Besëtz, deem säi Wäert den Toggling-Ankerelement ass. hide.bs.dropdown
an hidden.bs.dropdown
Evenementer hunn eng clickEvent
Propriétéit (nëmmen wann d'Original Event Typ ass click
) déi enthält en Event Objet fir de Klick Event.
Event | Beschreiwung |
---|---|
show.bs.dropdown |
Dëst Event brennt direkt wann d'Show Instanz Method genannt gëtt. |
shown.bs.dropdown |
Dëst Evenement gëtt ofgeléist wann den Dropdown fir de Benotzer siichtbar gemaach gouf (waart op CSS Iwwergäng, fir ze kompletéieren). |
hide.bs.dropdown |
Dëst Evenement gëtt direkt ausgeléist wann d'Hide Instanz Method genannt gouf. |
hidden.bs.dropdown |
Dëst Evenement gëtt ofgeléist wann den Dropdown fäerdeg ass vum Benotzer verstoppt ze ginn (waart op CSS Iwwergäng, fir ze kompletéieren). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})