Dropdowns
Skift kontekstuelle overlejringer for at vise lister over links og mere med Bootstrap dropdown-plugin'et.
Oversigt
Dropdowns kan skiftes, kontekstuelle overlejringer til at vise lister over links og mere. De er gjort interaktive med det inkluderede Bootstrap dropdown JavaScript-plugin. De skiftes ved at klikke, ikke ved at svæve; dette er en bevidst designbeslutning .
Dropdowns er bygget på et tredjepartsbibliotek, Popper , som giver dynamisk positionering og visningsportdetektion. Sørg for at inkludere popper.min.js før Bootstraps JavaScript eller brug bootstrap.bundle.min.js
/ bootstrap.bundle.js
som indeholder Popper. Popper bruges dog ikke til at placere dropdowns i navbarer, da dynamisk positionering ikke er påkrævet.
Hvis du bygger vores JavaScript fra kilden, kræverutil.js
det .
Tilgængelighed
WAI ARIA - standarden definerer en faktisk role="menu"
widget , men denne er specifik for applikationslignende menuer, der udløser handlinger eller funktioner. ARIA -menuer kan kun indeholde menupunkter, afkrydsningsfelter, menupunkter, alternativknapgrupper og undermenuer.
Bootstraps dropdowns er på den anden side designet til at være generiske og anvendelige til en række forskellige situationer og markup-strukturer. For eksempel er det muligt at oprette dropdowns, der indeholder yderligere input og formularkontrolelementer, såsom søgefelter eller loginformularer. Af denne grund forventer Bootstrap ikke (heller ikke automatisk tilføje) nogen af attributterne role
og aria-
, der kræves til ægte ARIA- menuer. Forfattere skal selv inkludere disse mere specifikke attributter.
Bootstrap tilføjer dog indbygget understøttelse af de fleste standard tastaturmenuinteraktioner, såsom muligheden for at bevæge sig gennem individuelle .dropdown-item
elementer ved hjælp af markørtasterne og lukke menuen med ESCtasten.
Eksempler
Ombryd rullemenuens til/fra-knap (din knap eller dit link) og rullemenuen i .dropdown
, eller et andet element, der erklærer position: relative;
. Dropdowns kan udløses fra <a>
eller <button>
elementer for bedre at passe til dine potentielle behov.
Enkelt knap
Enhver enkelt .btn
kan omdannes til en rullemenu med nogle markup-ændringer. Sådan kan du få dem til at fungere med begge <button>
elementer:
<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>
Og med <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>
Det bedste er, at du også kan gøre dette med enhver knapvariant:
<!-- 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 knap
På samme måde kan du oprette rullemenuer med delte knap med stort set samme markering som rullemenuer med enkelt knap, men med tilføjelse af .dropdown-toggle-split
for korrekt afstand omkring rullemenuen.
Vi bruger denne ekstra klasse til at reducere det vandrette padding
på hver side af bjælken med 25 % og fjerne det margin-left
, der er tilføjet til almindelige knap-dropdowns. Disse ekstra ændringer holder feltet centreret i splitknappen og giver et mere passende størrelse hitområde ved siden af hovedknappen.
<!-- 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>
Dimensionering
Knaprullemenuer fungerer med knapper i alle størrelser, inklusive standard- og opdelte rullemenuknapper.
<!-- 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>
Vejbeskrivelse
Dropup
Udløs rullemenuer over elementer ved at tilføje .dropup
til det overordnede element.
<!-- 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
Udløs rullemenuer til højre for elementerne ved at tilføje .dropright
til det overordnede element.
<!-- 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
Udløs rullemenuer til venstre for elementerne ved at tilføje .dropleft
til det overordnede element.
<!-- 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>
Menupunkter
Historisk set skulle indholdet i rullemenuen være links, men det er ikke længere tilfældet med v4. Nu kan du valgfrit bruge <button>
elementer i dine dropdowns i stedet for blot <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>
Du kan også oprette ikke-interaktive dropdown-elementer med .dropdown-item-text
. Du er velkommen til at style yderligere med brugerdefinerede CSS- eller tekstværktøjer.
<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øj .active
til elementer i rullemenuen for at style dem som aktive .
<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>
handicappet
Føj .disabled
til elementer i rullemenuen for at style dem som deaktiverede .
<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>
Menujustering
Som standard placeres en rullemenu automatisk 100 % fra toppen og langs venstre side af dens forælder. Føj .dropdown-menu-right
til en .dropdown-menu
højrejuster rullemenuen.
<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>
Responsiv justering
Hvis du vil bruge responsiv justering, skal du deaktivere dynamisk positionering ved at tilføje data-display="static"
attributten og bruge de responsive variationsklasser.
For at højrejustere rullemenuen med det givne brudpunkt eller større, skal du.dropdown-menu{-sm|-md|-lg|-xl}-right
tilføje .
<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>
For at justere rullemenuen til venstre med det givne brudpunkt eller større, skal du.dropdown-menu-right
tilføje og .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>
Bemærk, at du ikke behøver at tilføje en data-display="static"
attribut til dropdown-knapper i navbarer, da Popper ikke bruges i navbarer.
Menuindhold
Overskrifter
Tilføj en overskrift til at mærke sektioner af handlinger i enhver rullemenu.
<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>
Afdelere
Adskil grupper af relaterede menupunkter med en skillelinje.
<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>
Tekst
Placer enhver fritekst i en rullemenu med tekst, og brug mellemrumsværktøjer . Bemærk, at du sandsynligvis får brug for yderligere størrelsesstile for at begrænse menuens bredde.
<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>
Formularer
Indsæt en formular i en rullemenu, eller gør den til en rullemenu, og brug margen- eller udfyldningsværktøjer til at give den den negative plads, du har brug for.
<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 muligheder
Brug data-offset
eller data-reference
til at ændre placeringen af rullemenuen.
<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>
Brug
Via dataattributter eller JavaScript skifter dropdown-pluginnet skjult indhold (rullemenuer) ved at slå .show
klassen til og fra på den overordnede .dropdown-menu
. Attributten data-toggle="dropdown"
er afhængig af at lukke dropdown-menuer på et applikationsniveau, så det er en god idé altid at bruge det.
$.noop
)
mouseover
behandlere til de umiddelbare underordnede af
<body>
elementet. Dette ganske vist grimme hack er nødvendigt for at omgå en
særhed i iOS' begivenhedsdelegering , som ellers ville forhindre et tryk uden for rullemenuen i at udløse koden, der lukker rullemenuen. mouseover
Når rullemenuen er lukket, fjernes
disse yderligere tomme
handlere.Via dataattributter
Føj data-toggle="dropdown"
til et link eller knap for at skifte til en rullemenu.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Via JavaScript
Kald rullemenuerne via JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
stadig påkrævet
Uanset om du kalder din dropdown via JavaScript eller i stedet bruger data-api, data-toggle="dropdown"
skal du altid være tilstede på dropdownens triggerelement.
Muligheder
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-
, som i data-offset=""
.
Navn | Type | Standard | Beskrivelse |
---|---|---|---|
offset | nummer | streng | fungere | 0 | Forskydning af rullemenuen i forhold til dets mål. Når en funktion bruges til at bestemme forskydningen, kaldes den med et objekt, der indeholder forskydningsdataene som dets første argument. Funktionen skal returnere et objekt med samme struktur. Det udløsende element DOM-node sendes som det andet argument. For mere information henvises til Poppers offset-dokumenter . |
vende | boolesk | rigtigt | Tillad dropdown at vende i tilfælde af en overlapning på referenceelementet. For mere information henvises til Poppers flip-dokumenter . |
grænse | streng | element | 'scrollParent' | Overløbsbegrænsningsgrænse for rullemenuen. Accepterer værdierne for 'viewport' , 'window' , 'scrollParent' eller en HTMLElement-reference (kun JavaScript). For mere information henvises til Poppers preventOverflow-dokumenter . |
reference | streng | element | 'skift' | Referenceelement i rullemenuen. Accepterer værdierne for 'toggle' , 'parent' , eller en HTMLElement-reference. For mere information henvises til Poppers referenceObject docs . |
Skærm | snor | 'dynamisk' | Som standard bruger vi Popper til dynamisk positionering. Deaktiver dette med static . |
popperConfig | null | objekt | nul | For at ændre Bootstraps standard Popper -konfiguration, se Poppers konfiguration |
Bemærk, når boundary
er indstillet til en anden værdi end 'scrollParent'
, anvendes typografien position: static
på .dropdown
beholderen.
Metoder
Metode | Beskrivelse |
---|---|
$().dropdown('toggle') |
Skifter rullemenuen for en given navigationslinje eller navigation med faner. |
$().dropdown('show') |
Viser rullemenuen for en given navigationslinje eller navigation med faner. |
$().dropdown('hide') |
Skjuler rullemenuen for en given navigationslinje eller navigation med faner. |
$().dropdown('update') |
Opdaterer placeringen af et elements dropdown. |
$().dropdown('dispose') |
Ødelægger et elements dropdown. |
Begivenheder
Alle dropdown-hændelser udløses på .dropdown-menu
's overordnede element og har en relatedTarget
egenskab, hvis værdi er det skiftende ankerelement. hide.bs.dropdown
og hidden.bs.dropdown
hændelser har en clickEvent
egenskab (kun når den oprindelige hændelsestype er click
), der indeholder et hændelsesobjekt for klikhændelsen.
Begivenhed | Beskrivelse |
---|---|
show.bs.dropdown |
Denne hændelse udløses med det samme, når vis-instansmetoden kaldes. |
shown.bs.dropdown |
Denne hændelse udløses, når rullemenuen er gjort synlig for brugeren (vil vente på CSS-overgange for at fuldføre). |
hide.bs.dropdown |
Denne hændelse udløses med det samme, når hide instansmetoden er blevet kaldt. |
hidden.bs.dropdown |
Denne hændelse udløses, når dropdown-menuen er færdig med at blive skjult for brugeren (vil vente på CSS-overgange for at fuldføre). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})