Dropdowns

Skiptu um samhengisyfirlag til að sýna lista yfir tengla og fleira með Bootstrap fellilistanum.

Yfirlit

Hægt er að skipta um fellivalmyndir, samhengisyfirlögn til að birta tenglalista og fleira. Þeir eru gerðir gagnvirkir með meðfylgjandi Bootstrap JavaScript viðbótinni. Þeim er skipt með því að smella, ekki með því að sveima; þetta er viljandi hönnunarákvörðun.

Dropdowns eru byggðar á þriðja aðila bókasafni, Popper.js , sem veitir kraftmikla staðsetningu og uppgötvun útsýnisglugga. Vertu viss um að hafa popper.min.js á undan JavaScript Bootstrap eða notaðu bootstrap.bundle.min.js/ bootstrap.bundle.jssem inniheldur Popper.js. Popper.js er ekki notað til að staðsetja fellivalmyndir í navbars þó þar sem kraftmikil staðsetning er ekki nauðsynleg.

Ef þú ert að byggja JavaScript okkar frá uppruna, krefstutil.js það .

Aðgengi

WAI ARIA staðallinn skilgreinir raunverulega role="menu"græju , en þetta er sérstakt fyrir forritalíka valmyndir sem kalla fram aðgerðir eða aðgerðir. ARIA valmyndir geta aðeins innihaldið valmyndaratriði, valmyndaratriði í gátreitum, valmyndaratriði fyrir valhnappa, valhnappahópa og undirvalmyndir.

Bootstrap fellivalmyndirnar eru aftur á móti hönnuð til að vera almenn og eiga við margvíslegar aðstæður og álagningaruppbyggingu. Til dæmis er hægt að búa til fellivalmyndir sem innihalda viðbótarinntak og formstýringar, svo sem leitarreitir eða innskráningareyðublöð. Af þessum sökum býst Bootstrap ekki við (né bætir sjálfkrafa við) neinum af roleog aria-eiginleikum sem krafist er fyrir sannar ARIA valmyndir. Höfundar verða sjálfir að láta þessa sértækari eiginleika fylgja með.

Hins vegar bætir Bootstrap við innbyggðum stuðningi fyrir flest venjuleg lyklaborðsvalmyndasamskipti, svo sem möguleikann á að fara í gegnum einstaka .dropdown-itemþætti með því að nota bendilinn og loka valmyndinni með ESCtakkanum.

Dæmi

Vefjið fellivalmyndina (hnappinn þinn eða tengilinn) og fellivalmyndina innan .dropdown, eða annan þátt sem lýsir yfir position: relative;. Hægt er að kveikja á fellivalmyndum frá <a>eða <button>þáttum til að passa betur við hugsanlegar þarfir þínar.

Fellilistar með einum hnappi

Hægt er að breyta hverjum einasta .btní fellivalmynd með nokkrum álagningarbreytingum. Svona geturðu sett þá til að vinna með hvorum <button>þáttunum:

<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 með <a>þætti:

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

Það besta er að þú getur líka gert þetta með hvaða hnappafbrigði sem er:

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

Dreifingarhnappar fellivalmyndir

Á sama hátt skaltu búa til fellivalmyndir fyrir skiptan hnapp með nánast sömu merkingu og fellivalmyndir með einum hnappi, en með því að bæta við .dropdown-toggle-splitfyrir rétt bil í kringum fellilistann.

Við notum þennan aukaflokk til að draga úr láréttu paddinghvoru megin við skjáinn um 25% og fjarlægja það margin-leftsem er bætt við fyrir venjulegar fellivalmyndir hnappa. Þessar aukabreytingar halda rammanum fyrir miðju í klofnahnappinum og bjóða upp á viðeigandi stærð höggsvæðis við hlið aðalhnappsins.

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

Stærð

Hnappavalmyndir virka með hnöppum af öllum stærðum, þar með talið sjálfgefna og skiptan fellihnappa.

<!-- 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 afbrigði

Kveiktu á fellivalmyndum fyrir ofan þætti með því að bæta .dropupvið foreldraeininguna.

<!-- 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 afbrigði

Kveiktu á fellivalmyndum hægra megin við þættina með því að bæta .droprightvið yfireininguna.

<!-- 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 afbrigði

Kveiktu á fellivalmyndum vinstra megin við þættina með því að bæta .dropleftvið yfireininguna.

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

Sögulega þurfti innihald fellivalmynda að vera tenglar, en það er ekki lengur raunin með v4. Nú geturðu valfrjálst notað <button>þætti í fellilistanum þínum í staðinn fyrir bara <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>

Sjálfgefið er að fellivalmynd er sjálfkrafa staðsett 100% efst og meðfram vinstri hlið foreldris. Bættu .dropdown-menu-rightvið .dropdown-menutil hægri stilltu fellivalmyndina.

Höfuð upp! Fellilistar eru staðsettir þökk sé Popper.js (nema þegar þeir eru að finna í 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>

Bættu við haus til að merkja hluta aðgerða í hvaða fellivalmynd sem er.

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

Aðskildu hópa tengdra valmyndarhluta með skilrúmi.

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

Settu eyðublað í fellivalmynd, eða gerðu það í fellivalmynd, og notaðu spássíu eða fyllingu til að gefa því neikvæða plássið sem þú þarfnast.

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

Bættu .activevið atriði í fellilistanum til að stilla þau sem virk .

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

Bættu .disabledvið atriði í fellilistanum til að stilla þá sem óvirka .

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

Notkun

Með gagnaeiginleikum eða JavaScript breytir fellivalmyndinni falið efni (fellivalmyndir) með því að skipta um .showbekk á yfirliðinu á listanum. Stuðst data-toggle="dropdown"er við eiginleikann til að loka fellivalmyndum á forritastigi, svo það er góð hugmynd að nota hann alltaf.

Á snertivirkum tækjum bætir opnun fellivalmyndar tómum ( $.noop) mouseovermeðhöndlum við strax börn <body>frumefnisins. Þetta óneitanlega ljóta hakk er nauðsynlegt til að vinna í kringum sérkenni í viðburðaútsendingu iOS , sem annars myndi koma í veg fyrir að smellt væri hvar sem er fyrir utan fellilistann kveiki kóðann sem lokar fellilistanum. Þegar fellilistanum er lokað eru þessir tómu mouseovermeðhöndlarar til viðbótar fjarlægðir.

Í gegnum gagnaeiginleika

Bættu data-toggle="dropdown"við tengil eða hnapp til að skipta um fellilista.

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

Með JavaScript

Hringdu í fellilistana í gegnum JavaScript:

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

`data-toggle="dropdown"`enn krafist

Óháð því hvort þú hringir í fellilistann þinn í gegnum JavaScript eða notar þess í stað gagna-api, data-toggle="dropdown"þarf alltaf að vera til staðar á kveikjuhluta fellilistans.

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-offset="".

Nafn	Tegund	Sjálfgefið	Lýsing
á móti	númer \| strengur \| virka	0	Jöfnun á fellilistanum miðað við markmið hans. Nánari upplýsingar er að finna í offset skjölum Popper.js .
fletta	Boolean	satt	Leyfa fellilistanum að snúa við ef skarast á viðmiðunareiningunni. Nánari upplýsingar er að finna í flip-skjölum Popper.js .
mörk	strengur \| þáttur	'scrollParent'	Yfirfallsþvingunarmörk fellivalmyndarinnar. Samþykkir gildin `'viewport'`, `'window'`, `'scrollParent'`, eða HTMLElement tilvísun (aðeins JavaScript). Nánari upplýsingar er að finna í preventOverflow skjölum Popper.js .

Athugaðu þegar boundaryer stillt á annað gildi en 'scrollParent', stíllinn position: staticer notaður á .dropdownílátið.

Aðferðir

Aðferð	Lýsing
`$().dropdown('toggle')`	Skiptir á fellivalmynd tiltekinnar siglingastiku eða flipaleiðsögu.
`$().dropdown('update')`	Uppfærir staðsetningu fellilista þáttar.
`$().dropdown('dispose')`	Eyðir fellivalmynd frumefnis.

Viðburðir

Allir fellilistaviðburðir eru ræstir á .dropdown-menu's parent element og hafa relatedTargeteiginleika, sem gildir er skipta akkeri þáttur.

Viðburður	Lýsing
`show.bs.dropdown`	Þessi atburður ræsir strax þegar sýningartilviksaðferðin er kölluð.
`shown.bs.dropdown`	Þessi atburður er ræstur þegar fellivalmyndin hefur verið gerð sýnileg notanda (mun bíða eftir CSS umskiptum til að ljúka).
`hide.bs.dropdown`	Þessi atburður er ræstur strax þegar fela tilviksaðferðin hefur verið kölluð.
`hidden.bs.dropdown`	Þessi atburður er ræstur þegar fellivalmyndinni hefur verið falið fyrir notandanum (bíður eftir CSS umskiptum til að ljúka).

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

Dropdowns

Yfirlit

Aðgengi

Dæmi

Fellilistar með einum hnappi

Dreifingarhnappar fellivalmyndir

Stærð

Dropup afbrigði

Dropright afbrigði

Dropleft afbrigði

Valmyndaratriði

Valmynd röðun

Valmyndarhausar

Valmyndaskil

Valmyndareyðublöð

Virkir valmyndaratriði

Óvirkt valmyndaratriði

Notkun

Í gegnum gagnaeiginleika

Með JavaScript

`data-toggle="dropdown"`enn krafist

Valmöguleikar

Aðferðir

Viðburðir

Dropdowns

Yfirlit

Aðgengi

Dæmi

Fellilistar með einum hnappi

Dreifingarhnappar fellivalmyndir

Stærð

Dropup afbrigði

Dropright afbrigði

Dropleft afbrigði

Valmyndaratriði

Valmynd röðun

Valmyndarhausar

Fellihaus

Valmyndaskil

Valmyndareyðublöð

Virkir valmyndaratriði

Óvirkt valmyndaratriði

Notkun

Í gegnum gagnaeiginleika

Með JavaScript

data-toggle="dropdown"enn krafist

Valmöguleikar

Aðferðir

Viðburðir

`data-toggle="dropdown"`enn krafist