Vervolgkeuzelijsten

Schakel contextuele overlays in voor het weergeven van lijsten met links en meer met de Bootstrap dropdown-plug-in.

Overzicht

Dropdowns zijn schakelbare, contextuele overlays voor het weergeven van lijsten met links en meer. Ze zijn interactief gemaakt met de meegeleverde Bootstrap dropdown JavaScript-plug-in. Ze worden geschakeld door te klikken, niet door te zweven; dit is een opzettelijke ontwerpbeslissing .

Dropdowns zijn gebouwd op een externe bibliotheek, Popper , die dynamische positionering en viewport-detectie biedt. Zorg ervoor dat u popper.min.js opneemt vóór Bootstrap's JavaScript of gebruik bootstrap.bundle.min.js/ bootstrap.bundle.jsdat Popper bevat. Popper wordt niet gebruikt om dropdowns in navigatiebalken te plaatsen, omdat dynamische positionering niet vereist is.

Als u ons JavaScript vanaf de bron bouwt, isutil.js .

Toegankelijkheid

De WAI ARIA - standaard definieert een echte role="menu"widget , maar dit is specifiek voor toepassingsachtige menu's die acties of functies activeren. ARIA -menu's kunnen alleen menu-items, menu-items met selectievakjes, menu-items met keuzerondjes, groepen met keuzerondjes en submenu's bevatten.

De vervolgkeuzelijsten van Bootstrap zijn daarentegen zo ontworpen dat ze generiek zijn en toepasbaar op verschillende situaties en opmaakstructuren. Het is bijvoorbeeld mogelijk om dropdowns te maken die extra invoer en formulierbesturingselementen bevatten, zoals zoekvelden of inlogformulieren. Om deze reden verwacht Bootstrap geen van de roleen aria-attributen die vereist zijn voor echte ARIA- menu's (en voegt het ook niet automatisch toe). Auteurs zullen deze meer specifieke attributen zelf moeten opnemen.

Bootstrap voegt echter ingebouwde ondersteuning toe voor de meeste standaard toetsenbordmenu-interacties, zoals de mogelijkheid om door afzonderlijke .dropdown-itemelementen te bladeren met behulp van de cursortoetsen en het menu te sluiten met de ESCtoets.

Voorbeelden

Wikkel de schakelaar van de vervolgkeuzelijst (uw knop of link) en het vervolgkeuzemenu in .dropdown, of een ander element dat declareert position: relative;. Dropdowns kunnen worden geactiveerd vanuit <a>of <button>elementen om beter aan uw potentiële behoeften te voldoen.

Enkele knop

Elke single .btnkan worden omgezet in een vervolgkeuzeknop met enkele opmaakwijzigingen. Hier leest u hoe u ze aan het werk kunt zetten met beide <button>elementen:

<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>

En met <a>elementen:

<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>

Het beste is dat je dit ook met elke knopvariant kunt doen:

<!-- 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>

Splitsknop

Maak op dezelfde manier vervolgkeuzemenu's voor gesplitste knoppen met vrijwel dezelfde markeringen als vervolgkeuzelijsten met één knop, maar met de toevoeging van .dropdown-toggle-splitvoor de juiste afstand rond het dropdown-caret.

We gebruiken deze extra klasse om de horizontale lijn paddingaan weerszijden van het dakje met 25% te verminderen en margin-leftde toegevoegde voor normale vervolgkeuzelijsten voor knoppen te verwijderen. Die extra veranderingen houden het caret gecentreerd in de split-knop en zorgen voor een meer geschikt formaat hitgebied naast de hoofdknop.

<!-- 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>

Maatvoering

Dropdownmenu's voor knoppen werken met knoppen van alle formaten, inclusief standaard- en gesplitste vervolgkeuzeknoppen.

<!-- 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>

Routebeschrijving

Drop-up

Activeer vervolgkeuzemenu's boven elementen door toe te voegen .dropupaan het bovenliggende 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

Activeer vervolgkeuzemenu's rechts van de elementen door toe te voegen .droprightaan het bovenliggende 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>

Links laten vallen

Activeer vervolgkeuzemenu's aan de linkerkant van de elementen door toe te voegen .dropleftaan het bovenliggende 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>

Historisch gezien moest de inhoud van het dropdownmenu links zijn, maar dat is niet langer het geval met v4. Nu kunt u optioneel <button>elementen in uw vervolgkeuzelijsten gebruiken in plaats van alleen <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>

U kunt ook niet-interactieve dropdown-items maken met .dropdown-item-text. Voel je vrij om verder te stylen met aangepaste CSS of teksthulpprogramma's.

<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>

Actief

Voeg toe .activeaan items in de vervolgkeuzelijst om ze als actief te stylen .

<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>

Gehandicapt

Voeg toe .disabledaan items in de vervolgkeuzelijst om ze als uitgeschakeld te stylen .

<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>

Standaard wordt een vervolgkeuzemenu automatisch 100% vanaf de bovenkant en langs de linkerkant van het bovenliggende menu geplaatst. Voeg toe .dropdown-menu-rightaan een .dropdown-menuom het vervolgkeuzemenu rechts uit te lijnen.

Kop op! Dropdowns worden gepositioneerd dankzij Popper (behalve wanneer ze in een navigatiebalk staan).

<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>

Responsieve uitlijning

Als u responsieve uitlijning wilt gebruiken, schakelt u dynamische positionering uit door het data-display="static"kenmerk toe te voegen en de responsieve variatieklassen te gebruiken.

Om het vervolgkeuzemenu rechts uit te lijnen met het opgegeven breekpunt of groter, voegt 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>

Om het vervolgkeuzemenu links uit te lijnen met het opgegeven breekpunt of groter, voegt u .dropdown-menu-righten toe .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>

Merk op dat u geen data-display="static"attribuut hoeft toe te voegen aan dropdown-knoppen in navigatiebalken, aangezien Popper niet wordt gebruikt in navigatiebalken.

Kopteksten

Voeg een koptekst toe om secties van acties in een vervolgkeuzemenu te labelen.

<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>

Verdelers

Scheid groepen gerelateerde menu-items met een scheidingslijn.

<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

Plaats een willekeurige tekst in een vervolgkeuzemenu met tekst en gebruik spatiëringshulpprogramma's . Houd er rekening mee dat u waarschijnlijk extra formaatstijlen nodig hebt om de menubreedte te beperken.

<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>

Formulieren

Plaats een formulier in een vervolgkeuzemenu, of maak er een vervolgkeuzemenu van, en gebruik marge- of opvulhulpprogramma's om het de gewenste negatieve ruimte te geven.

<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>

Gebruik data-offsetof data-referenceom de locatie van de vervolgkeuzelijst te wijzigen.

<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>

Gebruik

Via gegevensattributen of JavaScript schakelt de vervolgkeuzeplug-in verborgen inhoud (vervolgkeuzemenu's) door de .showklasse op de bovenliggende .dropdown-menu. Er data-toggle="dropdown"wordt vertrouwd op het kenmerk voor het sluiten van vervolgkeuzemenu's op toepassingsniveau, dus het is een goed idee om het altijd te gebruiken.

Op apparaten met aanraakbediening voegt het openen van een vervolgkeuzelijst lege ( $.noop) mouseoverhandlers toe aan de directe onderliggende elementen van het <body>element. Deze weliswaar lelijke hack is nodig om een gril in de gebeurtenisdelegatie van iOS te omzeilen , die anders zou voorkomen dat een tik ergens buiten de vervolgkeuzelijst de code activeert die de vervolgkeuzelijst sluit. Zodra de vervolgkeuzelijst is gesloten, worden deze extra lege mouseoverhandlers verwijderd.

Via gegevensattributen

Voeg toe data-toggle="dropdown"aan een link of knop om een vervolgkeuzelijst in te schakelen.

<div class="dropdown">
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Via JavaScript

Roep de vervolgkeuzelijsten op via JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`nog steeds vereist

Ongeacht of u uw vervolgkeuzelijst via JavaScript oproept of in plaats daarvan de data-api gebruikt, data-toggle="dropdown"moet altijd aanwezig zijn op het trigger-element van de vervolgkeuzelijst.

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-offset="".

Naam	Type	Standaard	Beschrijving
offset	nummer \| tekenreeks \| functie	0	Offset van de vervolgkeuzelijst ten opzichte van het doel. Wanneer een functie wordt gebruikt om de offset te bepalen, wordt deze aangeroepen met een object dat de offsetgegevens als eerste argument bevat. De functie moet een object met dezelfde structuur teruggeven. Het triggerelement DOM-knooppunt wordt doorgegeven als het tweede argument. Raadpleeg voor meer informatie de offsetdocumenten van Popper .
omdraaien	booleaans	WAAR	Laat Dropdown omdraaien in geval van overlapping op het referentie-element. Raadpleeg voor meer informatie de flip-docs van Popper .
grens	tekenreeks \| element	'scrollOuder'	Overloopbeperkingsgrens van het vervolgkeuzemenu. Accepteert de waarden van `'viewport'`, `'window'`, `'scrollParent'`of een HTMLElement-referentie (alleen JavaScript). Raadpleeg voor meer informatie Popper's preventOverflow-documenten .
referentie	tekenreeks \| element	'schakelaar'	Referentie-element van het vervolgkeuzemenu. Accepteert de waarden van `'toggle'`, `'parent'`, of een HTMLElement-referentie. Raadpleeg voor meer informatie Popper's referenceObject docs .
Scherm	snaar	'dynamisch'	Standaard gebruiken we Popper voor dynamische positionering. Schakel dit uit met `static`.
popperConfig	null \| object	nul	Om de standaard Popper-configuratie van Bootstrap te wijzigen, zie Popper's configuratie

Let op wanneer boundaryis ingesteld op een andere waarde dan 'scrollParent', wordt de stijl position: statictoegepast op de .dropdowncontainer.

Methoden:

Methode	Beschrijving
`$().dropdown('toggle')`	Schakelt het vervolgkeuzemenu van een bepaalde navigatiebalk of navigatie met tabbladen in.
`$().dropdown('show')`	Toont het vervolgkeuzemenu van een bepaalde navigatiebalk of navigatie met tabbladen.
`$().dropdown('hide')`	Verbergt het vervolgkeuzemenu van een bepaalde navigatiebalk of navigatie met tabbladen.
`$().dropdown('update')`	Werkt de positie van de vervolgkeuzelijst van een element bij.
`$().dropdown('dispose')`	Vernietigt de vervolgkeuzelijst van een element.

Evenementen

Alle dropdown-gebeurtenissen worden geactiveerd op het .dropdown-menubovenliggende element 's en hebben een relatedTargeteigenschap, waarvan de waarde het toggle-ankerelement is. hide.bs.dropdownen hidden.bs.dropdowngebeurtenissen hebben een clickEventeigenschap (alleen wanneer het oorspronkelijke gebeurtenistype is click) die een gebeurtenisobject voor de klikgebeurtenis bevat.

Evenement	Beschrijving
`show.bs.dropdown`	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de methode show instance wordt aangeroepen.
`shown.bs.dropdown`	Deze gebeurtenis wordt geactiveerd wanneer de vervolgkeuzelijst zichtbaar is gemaakt voor de gebruiker (wacht op CSS-overgangen om te voltooien).
`hide.bs.dropdown`	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de methode hide instance is aangeroepen.
`hidden.bs.dropdown`	Deze gebeurtenis wordt geactiveerd wanneer de vervolgkeuzelijst is verborgen voor de gebruiker (wacht op CSS-overgangen om te voltooien).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

Vervolgkeuzelijsten

Overzicht

Toegankelijkheid

Voorbeelden

Enkele knop

Splitsknop

Maatvoering

Routebeschrijving

Drop-up

Dropright

Links laten vallen

Menu items

Actief

Gehandicapt

Menu-uitlijning

Responsieve uitlijning

Menu-inhoud

Kopteksten

Verdelers

Tekst

Formulieren

Gebruik

Via gegevensattributen

Via JavaScript

`data-toggle="dropdown"`nog steeds vereist

Opties

Methoden:

Evenementen

Vervolgkeuzelijsten

Overzicht

Toegankelijkheid

Voorbeelden

Enkele knop

Splitsknop

Maatvoering

Routebeschrijving

Drop-up

Dropright

Links laten vallen

Menu items

Actief

Gehandicapt

Menu-uitlijning

Responsieve uitlijning

Menu-inhoud

Kopteksten

Dropdown-koptekst

Verdelers

Tekst

Formulieren

Dropdown-opties

Gebruik

Via gegevensattributen

Via JavaScript

data-toggle="dropdown"nog steeds vereist

Opties

Methoden:

Evenementen

`data-toggle="dropdown"`nog steeds vereist