Dropdowns

Skeakelje kontekstuele overlays foar it werjaan fan listen mei keppelings en mear mei de Bootstrap dropdown-plugin.

Oersicht

Dropdowns binne te wikseljen, kontekstuele overlays foar it werjaan fan listen mei keppelings en mear. Se wurde ynteraktyf makke mei it ynbegrepen Bootstrap dropdown JavaScript-plugin. Se wurde wiksele troch te klikken, net troch te sweven; dit is in opsetlike ûntwerpbeslút.

Dropdowns binne boud op in tredde partij bibleteek, Popper.js , dy't soarget foar dynamyske posysjonearring en viewport detection. Wês wis dat jo popper.min.js opnimme foardat Bootstrap's JavaScript of brûk bootstrap.bundle.min.js/ bootstrap.bundle.jsdy't Popper.js befettet. Popper.js wurdt net brûkt om dropdowns yn navbars te pleatsen, om't dynamyske posisjonearring net fereaske is.

As jo ús JavaScript bouwe fanút boarne, fereasketutil.js it .

Tagonklikheid

De WAI ARIA - standert definiearret in wirklike role="menu"widget , mar dit is spesifyk foar applikaasje-like menu's dy't aksjes of funksjes trigger. ARIA -menu's kinne allinich menu-items, karfakje-menu-items, radioknopmenu-items, radioknopgroepen en submenu's befetsje.

De dropdowns fan Bootstrap, oan 'e oare kant, binne ûntworpen om generysk te wêzen en fan tapassing op in ferskaat oan situaasjes en markupstruktueren. It is bygelyks mooglik om dropdowns oan te meitsjen dy't ekstra ynputs en formulierkontrôles befetsje, lykas sykfjilden of oanmeldformulieren. Om dizze reden ferwachtet Bootstrap gjin (net automatysk tafoegje) ien fan 'e roleen aria-attributen dy't nedich binne foar wiere ARIA- menu's. Auteurs sille dizze mear spesifike attributen sels moatte opnimme.

Bootstrap foegje lykwols ynboude stipe ta foar de measte standert toetseboerdmenu-ynteraksjes, lykas de mooglikheid om troch yndividuele .dropdown-itemeleminten te bewegen mei de rinnerketoetsen en it menu te sluten mei de ESCkaai.

Foarbylden

Wrap de skeakel fan it dellûkmenu (jo knop of keppeling) en it dellûkmenu binnen .dropdown, of in oar elemint dat ferklearret position: relative;. Dropdowns kinne wurde aktivearre fan <a>of <button>eleminten om better te passen by jo potensjele behoeften.

Single knop

Elke single .btnkin wurde feroare yn in dropdown-skeakel mei wat markupwizigingen. Hjir is hoe't jo se mei beide <button>eleminten oan it wurk kinne sette:

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

En mei <a>eleminten:

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

It bêste diel is dat jo dit ek kinne dwaan mei elke knopfariant:

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

Meitsje op deselde manier split knop dropdowns mei praktysk deselde markup as single knop dropdowns, mar mei de tafoeging fan .dropdown-toggle-splitfoar juste ôfstân om de dropdown caret.

Wy brûke dizze ekstra klasse te ferminderjen de horizontale paddingoan wjerskanten fan 'e caret mei 25% en fuortsmite de margin-leftdat is tafoege foar reguliere knop dropdowns. Dy ekstra feroarings hâlden de caret sintraal yn de split knop en soargje foar in mear passend grutte hit gebiet neist de wichtichste knop.

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

Sizing

Button dropdowns wurkje mei knoppen fan alle grutte, ynklusyf standert en split dropdown knoppen.

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

Rjochtings

Dropup

Trigger dropdown-menu's boppe eleminten troch ta te foegjen .dropupoan it âlderelemint.

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

Trigger dropdown-menu's rjochts fan 'e eleminten troch ta te foegjen .droprightoan it âlderelemint.

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

Trigger dropdown-menu's links fan 'e eleminten troch ta te foegjen .dropleftoan it âlderelemint.

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

Histoarysk moast ynhâld fan útklapmenu keppelings wêze, mar dat is net mear it gefal mei v4. No kinne jo opsjoneel <button>eleminten brûke yn jo dropdowns ynstee fan gewoan <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>

Jo kinne ek net-ynteraktive dropdown-items meitsje mei .dropdown-item-text. Fiel jo frij om fierder te stylen mei oanpaste 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>

Aktyf

Taheakje .activeoan items yn it útklapmenu om se as aktyf te stylearjen .

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

Ynvalide

Taheakje .disabledoan items yn it útklapmenu om se te stylearjen as útskeakele .

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

Standert wurdt in útklapmenu automatysk 100% fan boppen en lâns de linkerkant fan syn âlder pleatst. Taheakje .dropdown-menu-rightoan in .dropdown-menurjochts rjochtsje it dellûkmenu.

Heads up! Dropdowns wurde gepositioneerd tank oan Popper.js (útsein as se binne befette yn in 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>

Kopteksten

Foegje in koptekst ta om seksjes fan aksjes te markearjen yn elk útklapmenu.

<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

Skieden groepen fan relatearre menu-items mei in divider.

<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

Pleats elke tekst yn 'e frije foarm yn in útklapmenu mei tekst en brûk spaasje-hulpprogramma's . Tink derom dat jo wierskynlik ekstra maatstilen nedich binne om de menubreedte te beheinen.

<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

Set in formulier yn in útklapmenu, of meitsje it yn in útklapmenu, en brûk marzje- of padding -helpprogramma's om it de negative romte te jaan dy't jo nedich binne.

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

Brûk data-offsetof data-referenceom de lokaasje fan it dellûkmenu te feroarjen.

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

Gebrûk

Fia gegevensattributen of JavaSkript skeakelt de dropdown-plugin ferburgen ynhâld (útklapmenu's) troch de .showklasse te wikseljen op it item fan 'e âlderlist. It data-toggle="dropdown"attribút wurdt fertroud foar it sluten fan dellûkmenu's op in applikaasjenivo, dus it is in goed idee om it altyd te brûken.

Op touch-ynskeakele apparaten, it iepenjen fan in dropdown foeget lege ( $.noop) mouseoverhandlers ta oan de direkte bern fan it <body>elemint. Dizze ûnsjogge hack is nedich om in eigensinnigens te wurkjen yn 'e delegaasje fan iOS-eveneminten , dy't oars soe foarkomme dat in tap oeral bûten it dropdown-menu de koade trigger dy't de dropdown slút. Sadree't it útklapmenu is sletten, wurde dizze ekstra lege mouseoverhandlers fuortsmiten.

Fia data attributen

Taheakje data-toggle="dropdown"oan in keppeling of knop om in dropdown te wikseljen.

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

Fia JavaScript

Rop de dropdowns fia JavaScript:

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

`data-toggle="dropdown"`noch nedich

Nettsjinsteande of jo jo dropdown fia JavaScript neame of ynstee de data-api brûke, data-toggle="dropdown"is altyd fereaske om oanwêzich te wêzen op it trigger-elemint fan 'e dropdown.

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-offset="".

Namme	Type	Standert	Beskriuwing
offset	nûmer \| string \| funksje	0	Offset fan it dropdown relatyf oan syn doel. Foar mear ynformaasje ferwize nei de offsetdokuminten fan Popper.js .
flip	boolean	wier	Lit Dropdown omkeare yn gefal fan in oerlaap op it referinsjeelemint. Foar mear ynformaasje ferwize nei Popper.js's flipdokuminten .
skieding	string \| elemint	'scrollParent'	Overflow beheining grins fan it dellûk menu. Akseptearret de wearden fan `'viewport'`, `'window'`, `'scrollParent'`, of in HTMLElement-referinsje (allinich JavaScript). Foar mear ynformaasje ferwize nei Popper.js's preventOverflow-dokuminten .
referinsje	string \| elemint	'wikselje'	Referinsje elemint fan it dellûk menu. Akseptearret de wearden fan `'toggle'`, `'parent'`, of in HTMLElement-referinsje. Foar mear ynformaasje ferwize nei Popper.js's referenceObject docs .
skerm	string	'dynamysk'	Standert brûke wy Popper.js foar dynamyske posisjonearring. Skeakelje dit út mei `static`.

Tink derom wannear boundaryis ynsteld op in oare wearde dan 'scrollParent', de styl position: staticwurdt tapast op de .dropdownkontener.

Metoaden

Metoade	Beskriuwing
`$().dropdown('toggle')`	Skeakelt it dellûkmenu fan in opjûne navigaasjebalke of navigaasje mei ljeppers.
`$().dropdown('update')`	Updatet de posysje fan in dellûkmenu fan in elemint.
`$().dropdown('dispose')`	Ferneatiget de dropdown fan in elemint.

Eveneminten

Alle dropdown-eveneminten wurde ûntslein op it âlderelemint fan .dropdown-menu'e en hawwe in relatedTargeteigenskip, waans wearde it wikseljende ankerelemint is. hide.bs.dropdownen hidden.bs.dropdowneveneminten hawwe in clickEventeigenskip (allinne as de oarspronklike evenemint type is click) dat befettet in Event Object foar de klik evenemint.

Barren	Beskriuwing
`show.bs.dropdown`	Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen.
`shown.bs.dropdown`	Dit evenemint wurdt ûntslein as de dellûk sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen, om te foltôgjen).
`hide.bs.dropdown`	Dit barren wurdt fuortendaliks ûntslein as de hide-eksimplaarmetoade oanroppen is.
`hidden.bs.dropdown`	Dit barren wurdt ûntslein as it útklapmenu klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen, om te foltôgjen).

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

Dropdowns

Oersicht

Tagonklikheid

Foarbylden

Single knop

Split knop

Sizing

Rjochtings

Dropup

Dropright

Dropleft

Menu items

Aktyf

Ynvalide

Menu alignment

Menu ynhâld

Kopteksten

Dividers

Tekst

Formulieren

Gebrûk

Fia data attributen

Fia JavaScript

`data-toggle="dropdown"`noch nedich

Opsjes

Metoaden

Eveneminten

Dropdowns

Oersicht

Tagonklikheid

Foarbylden

Single knop

Split knop

Sizing

Rjochtings

Dropup

Dropright

Dropleft

Menu items

Aktyf

Ynvalide

Menu alignment

Menu ynhâld

Kopteksten

Dropdown koptekst

Dividers

Tekst

Formulieren

Dropdown opsjes

Gebrûk

Fia data attributen

Fia JavaScript

data-toggle="dropdown"noch nedich

Opsjes

Metoaden

Eveneminten

`data-toggle="dropdown"`noch nedich