Rullegardiner

Veksle kontekstuelle overlegg for å vise lister over lenker og mer med Bootstrap dropdown-plugin.

Oversikt

Rullegardiner er vekslebare, kontekstuelle overlegg for å vise lister over lenker og mer. De er gjort interaktive med den inkluderte Bootstrap dropdown JavaScript-plugin. De byttes ved å klikke, ikke ved å sveve; dette er en tilsiktet designbeslutning.

Dropdowns er bygget på et tredjepartsbibliotek, Popper.js , som gir dynamisk posisjonering og visningsportdeteksjon. Sørg for å inkludere popper.min.js før Bootstraps JavaScript eller bruk bootstrap.bundle.min.js/ bootstrap.bundle.jssom inneholder Popper.js. Popper.js brukes ikke til å plassere rullegardinmenyene i navbarer, men da dynamisk posisjonering ikke er nødvendig.

Hvis du bygger JavaScript fra kilden, kreverutil.js det .

tilgjengelighet

WAI ARIA - standarden definerer en faktisk role="menu"widget , men dette er spesifikt for applikasjonslignende menyer som utløser handlinger eller funksjoner. ARIA -menyer kan bare inneholde menyelementer, avmerkingsboksmenyelementer, alternativknappmenyelementer, alternativknappgrupper og undermenyer.

Bootstraps rullegardinmenyer er på den annen side designet for å være generiske og anvendelige for en rekke situasjoner og markup-strukturer. For eksempel er det mulig å lage rullegardinmenyene som inneholder ytterligere inndata og skjemakontroller, for eksempel søkefelt eller påloggingsskjemaer. Av denne grunn forventer ikke Bootstrap (eller legger til automatisk) noen av attributtene roleog aria-som kreves for ekte ARIA - menyer. Forfattere må inkludere disse mer spesifikke attributtene selv.

Bootstrap legger imidlertid til innebygd støtte for de fleste standard tastaturmenyinteraksjoner, for eksempel muligheten til å bevege seg gjennom individuelle .dropdown-itemelementer ved hjelp av markørtastene og lukke menyen med ESCtasten.

Eksempler

Pakk rullegardinmenyen (din knapp eller lenke) og rullegardinmenyen innenfor .dropdown, eller et annet element som erklærer position: relative;. Dropdowns kan utløses fra <a>eller <button>elementer for å passe bedre til dine potensielle behov.

En knapp rullegardinmeny

Enhver enkelt .btnkan gjøres om til en rullegardinbryter med noen markupendringer. Slik kan du få dem til å fungere med begge <button>elementene:

<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 show">
  <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 beste er at du kan gjøre dette med hvilken som helst knappvariant også:

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

Rullegardiner for delt knapp

På samme måte kan du lage rullegardinmenyene med delte knapper med praktisk talt samme markering som rullegardinmenyene med én knapp, men med tillegg av .dropdown-toggle-splitfor riktig avstand rundt rullegardinlisten.

Vi bruker denne ekstra klassen for å redusere den horisontale paddingpå hver side av karet med 25 % og fjerne den margin-leftsom er lagt til for vanlige knappe-rullegardinmenyene. De ekstra endringene holder feltet sentrert i delknappen og gir et mer passende størrelse treffområde ved siden av 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>

Dimensjonering

Nedtrekksknapper fungerer med knapper i alle størrelser, inkludert standard- og delte rullegardinknapper.

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

Dropup-variasjon

Utløs rullegardinmenyer over elementer ved å legge .dropuptil det overordnede elementet.

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

Utløs rullegardinmenyer til høyre for elementene ved å legge .droprighttil det overordnede elementet.

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

Utløs rullegardinmenyer til venstre for elementene ved å legge .droplefttil det overordnede elementet.

<!-- 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 sett måtte innholdet i rullegardinmenyen være lenker, men det er ikke lenger tilfelle med v4. Nå kan du valgfritt bruke <button>elementer i rullegardinlistene dine i stedet for bare <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>

Som standard er en rullegardinmeny automatisk plassert 100 % fra toppen og langs venstre side av overordnet. Legg .dropdown-menu-righttil en .dropdown-menutil høyre juster rullegardinmenyen.

Vær oppmerksom! Nedtrekkslistene er plassert takket være Popper.js (bortsett fra når de er inneholdt 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>

Legg til en overskrift for å merke deler av handlinger i en rullegardinmeny.

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

Skill grupper av relaterte menyelementer 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>

Plasser et skjema i en rullegardinmeny, eller gjør det til en rullegardinmeny, og bruk margin- eller utfyllingsverktøy for å gi det den negative plassen du trenger.

<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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Legg .activetil elementer i rullegardinmenyen for å 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>

Legg .disabledtil elementer i rullegardinmenyen for å stil dem som deaktivert .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Bruk

Via dataattributter eller JavaScript, veksler rullegardinpluginen skjult innhold (rullegardinmenyer) ved å veksle mellom .showklassen på det overordnede listeelementet. Attributtet er avhengig av data-toggle="dropdown"for å lukke rullegardinmenyer på et programnivå, så det er en god idé å alltid bruke det.

På berøringsaktiverte enheter legger du til tomme ( $.noop) mouseoverbehandlere ved å åpne en rullegardin til de umiddelbare underordnede av <body>elementet. Dette riktignok stygge hacket er nødvendig for å omgå en finurlighet i iOS' hendelsesdelegering , som ellers ville forhindret at et trykk hvor som helst utenfor rullegardinmenyen utløser koden som lukker rullegardinmenyen. Når rullegardinmenyen er lukket, mouseoverfjernes disse ekstra tomme behandlerne.

Via dataattributter

Legg data-toggle="dropdown"til en lenke eller knapp for å veksle mellom en rullegardin.

<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

Ring rullegardinmenyene via JavaScript:

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

`data-toggle="dropdown"`fortsatt nødvendig

Uansett om du kaller ned rullegardinlisten din via JavaScript eller i stedet bruker data-api, data-toggle="dropdown"er det alltid nødvendig å være tilstede på rullegardinmenyens triggerelement.

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-offset="".

Navn	Type	Misligholde	Beskrivelse
offset	nummer \| streng \| funksjon	0	Forskyvning av rullegardinmenyen i forhold til målet. For mer informasjon se Popper.js sine offset-dokumenter .
snu	boolsk	ekte	Tillat dropdown å snu i tilfelle en overlapping på referanseelementet. For mer informasjon se Popper.js sine flip-dokumenter .
grense	streng \| element	'scrollParent'	Overløpsbegrensningsgrense for rullegardinmenyen. Godtar verdiene til `'viewport'`, `'window'`, `'scrollParent'`eller en HTMLElement-referanse (kun JavaScript). For mer informasjon, se Popper.js sine preventOverflow-dokumenter .

Merk at når boundaryer satt til en annen verdi enn 'scrollParent', brukes stilen position: staticpå .dropdownbeholderen.

Metoder

Metode	Beskrivelse
`$().dropdown('toggle')`	Bytter rullegardinmenyen til en gitt navigasjonslinje eller navigering med faner.
`$().dropdown('update')`	Oppdaterer posisjonen til et elements rullegardinmeny.
`$().dropdown('dispose')`	Ødelegger rullegardinmenyen til et element.

arrangementer

Alle rullegardinhendelser utløses på .dropdown-menu's overordnede element og har en relatedTargetegenskap, hvis verdi er det vekslende ankerelementet.

Begivenhet	Beskrivelse
`show.bs.dropdown`	Denne hendelsen utløses umiddelbart når vis-instansmetoden kalles.
`shown.bs.dropdown`	Denne hendelsen utløses når rullegardinmenyen er gjort synlig for brukeren (vil vente på CSS-overganger for å fullføre).
`hide.bs.dropdown`	Denne hendelsen utløses umiddelbart når hide-forekomstmetoden har blitt kalt.
`hidden.bs.dropdown`	Denne hendelsen utløses når rullegardinmenyen er ferdig skjult for brukeren (vil vente på CSS-overganger for å fullføre).

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

Rullegardiner

Oversikt

tilgjengelighet

Eksempler

En knapp rullegardinmeny

Rullegardiner for delt knapp

Dimensjonering

Dropup-variasjon

Dropright-variasjon

Dropleft-variasjon

Menyelementer

Menyjustering

Menyoverskrifter

Menydelere

Menyskjemaer

Aktive menyelementer

Deaktiverte menyelementer

Bruk

Via dataattributter

Via JavaScript

`data-toggle="dropdown"`fortsatt nødvendig

Alternativer

Metoder

arrangementer

Rullegardiner

Oversikt

tilgjengelighet

Eksempler

En knapp rullegardinmeny

Rullegardiner for delt knapp

Dimensjonering

Dropup-variasjon

Dropright-variasjon

Dropleft-variasjon

Menyelementer

Menyjustering

Menyoverskrifter

Dropdown-overskrift

Menydelere

Menyskjemaer

Aktive menyelementer

Deaktiverte menyelementer

Bruk

Via dataattributter

Via JavaScript

data-toggle="dropdown"fortsatt nødvendig

Alternativer

Metoder

arrangementer

`data-toggle="dropdown"`fortsatt nødvendig