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 , sem veitir kraftmikla staðsetningu og skynjun útsýni. Vertu viss um að hafa popper.min.js á undan JavaScript Bootstrap eða notaðu bootstrap.bundle.min.js/ bootstrap.bundle.jssem inniheldur Popper. Popper er þó ekki notaður til að staðsetja fellivalmyndir í siglingastikum þar sem ekki er þörf á kraftmikilli staðsetningu.

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.

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

Og með <a>þætti:

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

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

Leiðbeiningar

Dropup

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

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

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

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

Þú 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">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 (nema þegar þeir eru í stýristiku).

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

Móttækileg röðun

Ef þú vilt nota móttækilega röðun skaltu slökkva á kraftmikilli staðsetningu með því að bæta við data-display="static"eigindinni og nota móttækilega afbrigðisflokkana.

Til að stilla fellivalmyndina til hægri.dropdown-menu{-sm|-md|-lg|-xl}-right við tiltekið brotpunkt eða stærra skaltu bæta við .

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

Til að samræma fellivalmyndina til vinstri.dropdown-menu-right við tiltekinn brotpunkt eða stærra skaltu bæta við og .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>

Athugaðu að þú þarft ekki að bæta data-display="static"eigind við fellivalhnappa í siglingastikum, þar sem Popper er ekki notaður í siglingastikum.

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

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

Notkun

Með gagnaeiginleikum eða JavaScript breytir fellivalmyndinni falið efni (fellivalmyndir) með því að skipta um .showbekk á foreldri .dropdown-menu. 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 type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu">
    ...
  </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. Þegar fall er notað til að ákvarða offsetið er það kallað með hlut sem inniheldur offset gögnin sem fyrstu rök. Fallið verður að skila hlut með sömu uppbyggingu. Kveikjuþátturinn DOM hnútur er samþykktur sem önnur rök. Nánari upplýsingar er að finna í Offset-skjölum Poppers .
fletta	Boolean	satt	Leyfa fellilistanum að snúa við ef skarast á viðmiðunareiningunni. Nánari upplýsingar er að finna í Poppers flip-skjölum .
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 í skjölum Poppers preventOverflow .
tilvísun	strengur \| þáttur	'skipta'	Tilvísunarþáttur fellivalmyndarinnar. Samþykkir gildin `'toggle'`, `'parent'`, eða HTMLElement tilvísun. Nánari upplýsingar er að finna í tilvísunarskjölum Popper .
sýna	strengur	'dynamic'	Sjálfgefið er að við notum Popper fyrir kraftmikla staðsetningu. Slökktu á þessu með `static`.
popperConfig	núll \| mótmæla	núll	Til að breyta sjálfgefna Popper stillingu Bootstrap, sjáðu stillingar Popper

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('show')`	Sýnir fellivalmynd tiltekinnar siglingastiku eða flipaleiðsögu.
`$().dropdown('hide')`	Felur 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 clickEventeign (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ý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

Einn hnappur

Skiptahnappur

Stærð

Leiðbeiningar

Dropup

Dropright

Dropleft

Valmyndaratriði

Virkur

Öryrkjar

Valmynd röðun

Móttækileg 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

Móttækileg 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