Rozbaľovacie ponuky
Pomocou rozbaľovacieho doplnku Bootstrap môžete prepínať kontextové prekrytia na zobrazenie zoznamov odkazov a ďalšie.
Prehľad
Rozbaľovacie zoznamy sú prepínateľné, kontextové prekrytia na zobrazenie zoznamov odkazov a ďalšie. Sú interaktívne vďaka doplnku JavaScript rozbaľovacej ponuky Bootstrap. Prepínajú sa kliknutím, nie umiestnením kurzora myši; ide o zámerné rozhodnutie o dizajne .
Rozbaľovacie zoznamy sú postavené na knižnici tretej strany, Popper , ktorá poskytuje dynamické určovanie polohy a detekciu výrezov. Nezabudnite zahrnúť popper.min.js pred JavaScript Bootstrapu alebo použite bootstrap.bundle.min.js
/ bootstrap.bundle.js
ktorý obsahuje Popper. Popper sa nepoužíva na umiestnenie rozbaľovacích zoznamov v navigačných paneloch, hoci dynamické určovanie polohy sa nevyžaduje.
Ak vytvárate náš JavaScript zo zdroja, vyžadujeutil.js
.
Prístupnosť
Štandard WAI ARIA definuje skutočnú role="menu"
miniaplikáciu , ale je to špecifické pre ponuky podobné aplikáciám, ktoré spúšťajú akcie alebo funkcie. Ponuky ARIA môžu obsahovať iba položky ponuky, položky ponuky začiarkavacích políčok, položky ponuky prepínačov, skupiny prepínačov a podponuky.
Na druhej strane rozbaľovacie ponuky Bootstrapu sú navrhnuté tak, aby boli všeobecné a použiteľné v rôznych situáciách a štruktúrach značiek. Napríklad je možné vytvoriť rozbaľovacie zoznamy, ktoré obsahujú ďalšie vstupy a ovládacie prvky formulárov, ako sú vyhľadávacie polia alebo prihlasovacie formuláre. Z tohto dôvodu Bootstrap neočakáva (ani automaticky nepridáva) žiadne z atribútov role
a požadovaných pre skutočné ponuky ARIA . Autori budú musieť zahrnúť tieto konkrétnejšie atribúty sami.aria-
Bootstrap však pridáva vstavanú podporu pre väčšinu štandardných interakcií s ponukami klávesnice, ako je napríklad možnosť prechádzať jednotlivými .dropdown-item
prvkami pomocou kurzorových kláves a zavrieť ponuku ESCklávesom.
Príklady
Zabaľte prepínač rozbaľovacej ponuky (vaše tlačidlo alebo odkaz) a rozbaľovaciu ponuku do .dropdown
, alebo iného prvku, ktorý deklaruje position: relative;
. Rozbaľovacie zoznamy možno spustiť z prvkov <a>
alebo <button>
prvkov, aby lepšie vyhovovali vašim potenciálnym potrebám.
Jediné tlačidlo
Akýkoľvek singel .btn
možno zmeniť na rozbaľovací prepínač s niekoľkými zmenami značiek. Tu je návod, ako ich môžete uviesť do prevádzky s oboma <button>
prvkami:
<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>
A s <a>
prvkami:
<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>
Najlepšie na tom je, že to môžete urobiť aj s akýmkoľvek variantom tlačidla:
<!-- 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>
Rozdeliť tlačidlo
Podobne vytvorte rozbaľovacie zoznamy s rozdelenými tlačidlami s prakticky rovnakým označením ako rozbaľovacie zoznamy s jedným tlačidlom, ale s pridaním .dropdown-toggle-split
správneho rozmiestnenia okolo rozbaľovacej striešky.
Túto extra triedu používame na zmenšenie vodorovnej polohy padding
na oboch stranách vsuvky o 25 % a odstránenie margin-left
pridaných položiek pre bežné rozbaľovacie ponuky. Tieto dodatočné zmeny udržujú striešku v strede rozdeleného tlačidla a poskytujú vhodnejšiu oblasť zásahu vedľa hlavného tlačidla.
<!-- 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>
Dimenzovanie
Rozbaľovacie zoznamy tlačidiel fungujú s tlačidlami všetkých veľkostí vrátane predvolených a rozdelených rozbaľovacích tlačidiel.
<!-- 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>
Smery
Dropup
Spustite rozbaľovacie ponuky nad prvkami pridaním .dropup
do nadradeného prvku.
<!-- 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
Spustite rozbaľovacie ponuky napravo od prvkov pridaním .dropright
do nadradeného prvku.
<!-- 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
Spustite rozbaľovacie ponuky naľavo od prvkov pridaním .dropleft
do nadradeného prvku.
<!-- 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>
Položky menu
Historicky obsahom rozbaľovacej ponuky museli byť odkazy, ale to už nie je prípad verzie 4. Teraz môžete voliteľne použiť <button>
prvky v rozbaľovacích zoznamoch namiesto iba <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>
Môžete tiež vytvoriť neinteraktívne rozbaľovacie položky pomocou .dropdown-item-text
. Neváhajte a upravte štýl pomocou vlastného CSS alebo textových nástrojov.
<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>
Aktívne
Pridať .active
k položkám v rozbaľovacej ponuke, ak chcete , aby boli označené ako aktívne .
<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>
Zakázané
Pridajte .disabled
položky v rozbaľovacej ponuke, aby ste ich označili ako zakázané .
<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>
Zarovnanie ponuky
V predvolenom nastavení je rozbaľovacia ponuka automaticky umiestnená 100 % zhora a pozdĺž ľavej strany nadradenej položky. Pridať .dropdown-menu-right
do a .dropdown-menu
zarovnať rozbaľovaciu ponuku doprava.
<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>
Responzívne zarovnanie
Ak chcete použiť responzívne zarovnanie, zakážte dynamické umiestňovanie pridaním data-display="static"
atribútu a použite responzívne triedy variácií.
Ak chcete zarovnať rozbaľovaciu ponuku vpravo s daným bodom prerušenia alebo väčším, pridajte .dropdown-menu{-sm|-md|-lg|-xl}-right
.
<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>
Ak chcete zarovnať rozbaľovaciu ponuku vľavo s daným bodom prerušenia alebo väčším, pridajte .dropdown-menu-right
a .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>
Upozorňujeme, že k rozbaľovacím tlačidlám v navigačných paneloch nemusíte pridávať data-display="static"
atribút, pretože Popper sa v navigačných paneloch nepoužíva.
Obsah menu
Hlavičky
Pridajte hlavičku na označenie sekcií akcií v ľubovoľnej rozbaľovacej ponuke.
<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>
Rozdeľovače
Skupiny súvisiacich položiek ponuky oddeľte oddeľovačom.
<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>
Text
Umiestnite ľubovoľný voľný text do rozbaľovacej ponuky s textom a použite pomôcky na nastavenie medzier . Upozorňujeme, že na obmedzenie šírky ponuky budete pravdepodobne potrebovať ďalšie štýly veľkosti.
<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>
Formuláre
Umiestnite formulár do rozbaľovacej ponuky alebo z neho urobte rozbaľovaciu ponuku a použite nástroje pre okraje alebo výplň , aby ste mu poskytli požadovaný negatívny priestor.
<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>
Rozbaľovacie možnosti
Pomocou data-offset
alebo data-reference
zmeňte umiestnenie rozbaľovacej ponuky.
<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>
Použitie
Prostredníctvom dátových atribútov alebo JavaScriptu rozbaľovací doplnok prepína skrytý obsah (rozbaľovacie ponuky) prepínaním .show
triedy na nadradenom .dropdown-menu
. Tento data-toggle="dropdown"
atribút sa používa pri zatváraní rozbaľovacích ponúk na úrovni aplikácie, takže je dobré ho vždy používať.
$.noop
)
. Tento, pravda, škaredý hack je potrebný na
obídenie zvláštnosti v delegovaní udalosti v systéme iOS , ktorá by inak zabránila klepnutiu kdekoľvek mimo rozbaľovacej ponuky spustiť kód, ktorý zatvorí rozbaľovaciu ponuku. Po zatvorení rozbaľovacej ponuky sa tieto ďalšie prázdne
obslužné nástroje odstránia.
mouseover
<body>
mouseover
Cez dátové atribúty
Pridať data-toggle="dropdown"
k odkazu alebo tlačidlu na prepnutie rozbaľovacej ponuky.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Cez JavaScript
Zavolajte rozbaľovacie ponuky pomocou JavaScriptu:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
stále požadované
Bez ohľadu na to, či zavoláte rozbaľovaciu ponuku prostredníctvom JavaScriptu alebo namiesto toho použijete data-api, data-toggle="dropdown"
musí byť vždy prítomná na spúšťacom prvku rozbaľovacej ponuky.
možnosti
Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-
, ako v data-offset=""
.
názov | Typ | Predvolené | Popis |
---|---|---|---|
offset | číslo | reťazec | funkciu | 0 | Posun rozbaľovacej ponuky vzhľadom na jej cieľ. Keď sa funkcia používa na určenie posunu, volá sa s objektom obsahujúcim údaje o posune ako jej prvý argument. Funkcia musí vrátiť objekt s rovnakou štruktúrou. Uzol DOM spúšťacieho prvku sa odovzdá ako druhý argument. Ďalšie informácie nájdete v dokumentoch Popper's ofset . |
prevrátiť | boolovská hodnota | pravda | V prípade prekrytia na referenčnom prvku povoľte prevrátenie rozbaľovacej ponuky. Ďalšie informácie nájdete v dokumentoch Popper's flip docs . |
hranica | reťazec | prvok | 'scrollParent' | Hranica obmedzenia pretečenia rozbaľovacej ponuky. Prijíma hodnoty 'viewport' , 'window' , 'scrollParent' alebo odkaz HTMLElement (iba JavaScript). Ďalšie informácie nájdete v dokumentoch Popper's preventOverflow . |
odkaz | reťazec | prvok | 'toggle' | Referenčný prvok rozbaľovacej ponuky. Prijíma hodnoty 'toggle' , 'parent' , alebo odkaz HTMLElement. Ďalšie informácie nájdete v dokumentoch Popper's referenceObject docs . |
displej | reťazec | 'dynamic' | Na dynamické polohovanie štandardne používame Popper. Zakázať to pomocou static . |
popperConfig | null | objekt | nulový | Ak chcete zmeniť predvolenú konfiguráciu Popper Bootstrapu, pozrite si časť Konfigurácia Poppera |
Všimnite si, že keď boundary
je nastavená na inú hodnotu ako 'scrollParent'
, štýl position: static
sa použije na .dropdown
kontajner.
Metódy
Metóda | Popis |
---|---|
$().dropdown('toggle') |
Prepína rozbaľovaciu ponuku daného navigačného panela alebo navigácie s kartami. |
$().dropdown('show') |
Zobrazuje rozbaľovaciu ponuku daného navigačného panela alebo navigácie na kartách. |
$().dropdown('hide') |
Skryje rozbaľovaciu ponuku daného navigačného panela alebo navigácie s kartami. |
$().dropdown('update') |
Aktualizuje pozíciu rozbaľovacej ponuky prvku. |
$().dropdown('dispose') |
Zničí rozbaľovaciu ponuku prvku. |
Diania
Všetky udalosti rozbaľovacej ponuky sa spúšťajú v .dropdown-menu
nadradenom prvku a majú relatedTarget
vlastnosť, ktorej hodnota je prepínací prvok kotvy. hide.bs.dropdown
a hidden.bs.dropdown
udalosti majú clickEvent
vlastnosť (iba ak je pôvodný typ udalosti click
), ktorá obsahuje objekt udalosti pre udalosť kliknutia.
Udalosť | Popis |
---|---|
show.bs.dropdown |
Táto udalosť sa spustí okamžite, keď je zavolaná metóda show instance. |
shown.bs.dropdown |
Táto udalosť sa spustí, keď sa rozbaľovacia ponuka zobrazí používateľovi (bude čakať na dokončenie prechodov CSS). |
hide.bs.dropdown |
Táto udalosť sa spustí okamžite po zavolaní metódy skrytia inštancie. |
hidden.bs.dropdown |
Táto udalosť sa spustí, keď sa rozbaľovacia ponuka skončí skrytím pred používateľom (bude čakať na dokončenie prechodov CSS). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})