Dropdowns

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

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 fellivalmynd 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 Bootstrap JavaScript 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átreitar, valmyndaratriði fyrir valhnappa, valhnappahópa og undirvalmyndir.

Dropdownlistir Bootstrap 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.

Einn hnappur

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

Skiptahnappur

Á sama hátt, búðu til fellivalmyndahnappa 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ð hornið um 25% og fjarlægja það margin-leftsem er bætt við fyrir venjulegar fellivalmyndir hnappa. Þessar aukabreytingar halda skjánum fyrir miðju í skiptuhnappinum og veita meira viðeigandi stærð höggsvæði 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ðal sjálfgefna og skiptan fellivalhnappa.

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

Leiðbeiningar

Dropup

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

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

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

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

Þú getur líka búið til ógagnvirka fellilista með .dropdown-item-text. Ekki hika við að stíla frekar með sérsniðnum CSS eða textaforritum.

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

Virkur

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>

Öryrkjar

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>

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 í stýristiku).

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

Hausar

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>

Deilendur

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>

Texti

Settu hvaða texta sem er í frjálsu formi í fellivalmynd með texta og notaðu biltól . Athugaðu að þú þarft líklega fleiri stærðarstíla til að takmarka breidd valmyndarinnar.

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

Eyðublöð

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>

Notaðu data-offseteða data-referencetil að breyta staðsetningu fellilistans.

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

Notkun

Í gegnum gagnaeiginleika 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öndlunaraðilum við næstu 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. Frekari 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 .
tilvísun	strengur \| þáttur	'skipta'	Tilvísunarþáttur í fellivalmyndinni. Samþykkir gildi `'toggle'`, `'parent'`, eða HTMLElement tilvísun. Fyrir frekari upplýsingar skaltu vísa til Popper.js's referenceObject skjöl .
sýna	strengur	'dynamic'	Sjálfgefið er að við notum Popper.js fyrir kraftmikla staðsetningu. Slökktu á þessu með `static`.

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. hide.bs.dropdownog hidden.bs.dropdownatburðir hafa clickEventeiginleika (aðeins þegar upprunalega atburðartegundin er click) sem inniheldur atburðarhlut fyrir smelliviðburðinn.

Viðburður	Lýsing
`show.bs.dropdown`	Þessi atburður ræsir strax þegar sýndartilviksaðferðin er kölluð.
`shown.bs.dropdown`	Þessi atburður er ræstur þegar fellivalmyndin hefur verið gerð sýnileg notandanum (bíður 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

Einn hnappur

Skiptahnappur

Stærð

Leiðbeiningar

Dropup

Dropright

Dropleft

Valmyndaratriði

Virkur

Öryrkjar

Valmynd röðun

Innihald valmyndar

Hausar

Deilendur

Texti

Eyðublöð

Notkun

Í gegnum gagnaeiginleika

Með JavaScript

`data-toggle="dropdown"`enn krafist

Valmöguleikar

Aðferðir

Viðburðir

Dropdowns

Yfirlit

Aðgengi

Dæmi

Einn hnappur

Skiptahnappur

Stærð

Leiðbeiningar

Dropup

Dropright

Dropleft

Valmyndaratriði

Virkur

Öryrkjar

Valmynd röðun

Innihald valmyndar

Hausar

Fellihaus

Deilendur

Texti

Eyðublöð

Valkostir í fellivalmynd

Notkun

Í gegnum gagnaeiginleika

Með JavaScript

data-toggle="dropdown"enn krafist

Valmöguleikar

Aðferðir

Viðburðir

`data-toggle="dropdown"`enn krafist