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.js , som giver dynamisk positionering og viewport-detektion. Sørg for at inkludere popper.min.js før Bootstraps JavaScript eller brug bootstrap.bundle.min.js/ bootstrap.bundle.jssom indeholder Popper.js. Popper.js 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 roleog 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-itemelementer 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 .btnkan 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" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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-haspopup="true" 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-splitfor korrekt afstand omkring rullemenuen.

Vi bruger denne ekstra klasse til at reducere det vandrette paddingpå 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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 .dropuptil det overordnede element.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" 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 .droprighttil det overordnede element.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" 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 .droplefttil det overordnede element.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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>

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" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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 .activetil 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 .disabledtil 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" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Som standard placeres en rullemenu automatisk 100 % fra toppen og langs venstre side af dens forælder. Føj .dropdown-menu-righttil en .dropdown-menuhøjrejuster rullemenuen.

Heads up! Dropdowns er placeret takket være Popper.js (undtagen når de er indeholdt i en navbar).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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.js ikke bruges i navbarer.

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>

Brug data-offseteller data-referencetil at ændre placeringen af rullemenuen.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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 skifte .showklassen på det overordnede listeelement. 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.

På berøringsaktiverede enheder tilføjer åbning af en rullemenu tomme ( $.noop) mouseoverbehandlere 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. mouseoverNå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 id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </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 Popper.js's offset-dokumenter .
vende	boolesk	rigtigt	Tillad dropdown at vende i tilfælde af en overlapning på referenceelementet. For mere information henvises til Popper.js's 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 Popper.js's preventOverflow-dokumenter .
reference	streng \| element	'skift'	Referenceelement i rullemenuen. Accepterer værdierne for `'toggle'`, `'parent'`, eller en HTMLElement-reference. For mere information henvises til Popper.js' referenceObject docs .
Skærm	snor	'dynamisk'	Som standard bruger vi Popper.js til dynamisk positionering. Deaktiver dette med `static`.
popperConfig	null \| objekt	nul	For at ændre Bootstraps standard Popper.js-konfiguration, se Popper.js's konfiguration

Bemærk, når boundaryer indstillet til en anden værdi end 'scrollParent', anvendes typografien position: staticpå .dropdownbeholderen.

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 rullemenu.
`$().dropdown('dispose')`	Ødelægger et elements dropdown.

Begivenheder

Alle dropdown-hændelser udløses på .dropdown-menu's overordnede element og har en relatedTargetegenskab, hvis værdi er det skiftende ankerelement. hide.bs.dropdownog hidden.bs.dropdownhændelser har en clickEventegenskab (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...
})

Dropdowns

Oversigt

Tilgængelighed

Eksempler

Enkelt knap

Split knap

Dimensionering

Vejbeskrivelse

Dropup

Dropright

Dropleft

Menupunkter

Aktiv

handicappet

Menujustering

Responsiv justering

Menuindhold

Overskrifter

Afdelere

Tekst

Formularer

Brug

Via dataattributter

Via JavaScript

`data-toggle="dropdown"`stadig påkrævet

Muligheder

Metoder

Begivenheder

Dropdowns

Oversigt

Tilgængelighed

Eksempler

Enkelt knap

Split knap

Dimensionering

Vejbeskrivelse

Dropup

Dropright

Dropleft

Menupunkter

Aktiv

handicappet

Menujustering

Responsiv justering

Menuindhold

Overskrifter

Dropdown-overskrift

Afdelere

Tekst

Formularer

Dropdown muligheder

Brug

Via dataattributter

Via JavaScript

data-toggle="dropdown"stadig påkrævet

Muligheder

Metoder

Begivenheder

`data-toggle="dropdown"`stadig påkrævet