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.
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. Tu uvedené príklady používajú <ul>
tam, kde je to vhodné, sémantické prvky, ale je podporované vlastné označenie.
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-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
A s <a>
prvkami:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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 zníženie vodorovnej polohy padding
na oboch stranách vsuvky o 25 % a na odstránenie margin-left
pridaných položiek pre bežné rozbaľovacie ponuky. Tieto dodatočné zmeny udržujú striešku vycentrovanú v rozdelenom tlačidle 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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Tmavé rozbaľovacie ponuky
Prihláste sa do tmavších rozbaľovacích ponúk, aby zodpovedali tmavému navigačnému panelu alebo vlastnému štýlu pridaním .dropdown-menu-dark
do existujúceho .dropdown-menu
. V rozbaľovacích položkách nie sú potrebné žiadne zmeny.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
A jeho použitie v navigačnom paneli:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Smery
RTL
Pri používaní Bootstrapu v RTL sa zrkadlia pokyny, čo znamená, že .dropstart
sa zobrazí na pravej strane.
Vycentrované
Umiestnite rozbaľovaciu ponuku do stredu pod prepínačom pomocou .dropdown-center
nadradeného prvku.
<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
</div>
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-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropup vycentrovaný
Umiestnite rozbaľovaciu ponuku do stredu nad prepínačom pomocou .dropup-center
nadradeného prvku.
<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
</div>
Dropend
Spustite rozbaľovacie ponuky napravo od prvkov pridaním .dropend
do nadradeného prvku.
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropend</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropstart
Spustite rozbaľovacie ponuky naľavo od prvkov pridaním .dropstart
do nadradeného prvku.
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
Položky menu
Ako rozbaľovacie položky môžete použiť prvky <a>
alebo .<button>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</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.
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
Aktívne
Pridať .active
k položkám v rozbaľovacej ponuke, aby ste ich naštýlovali ako aktívne . Ak chcete sprostredkovať aktívny stav asistenčným technológiám, použite aria-current
atribút — pomocou page
hodnoty pre aktuálnu stránku alebo true
pre aktuálnu položku v skupine.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Zakázané
Pridajte .disabled
položky v rozbaľovacej ponuke, aby ste ich označili ako zakázané .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Zarovnanie ponuky
V predvolenom nastavení je rozbaľovacia ponuka automaticky umiestnená 100 % zhora a pozdĺž ľavej strany nadradenej položky. Môžete to zmeniť pomocou smerových .drop*
tried, ale môžete ich tiež ovládať pomocou ďalších tried modifikátorov.
Pridať .dropdown-menu-end
do a .dropdown-menu
zarovnať rozbaľovaciu ponuku doprava. Pri používaní Bootstrapu v RTL sa zrkadlia pokyny, čo znamená, že .dropdown-menu-end
sa zobrazí na ľavej strane.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Responzívne zarovnanie
Ak chcete použiť responzívne zarovnanie, zakážte dynamické umiestňovanie pridaním data-bs-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|-xxl}-end
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Ak chcete zarovnať rozbaľovaciu ponuku doľava s daným bodom prerušenia alebo väčším, pridajte .dropdown-menu-end
a .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Upozorňujeme, že k rozbaľovacím tlačidlám v navigačných paneloch nemusíte pridávať data-bs-display="static"
atribút, pretože Popper sa v navigačných paneloch nepoužíva.
Možnosti zarovnania
Ak vezmeme do úvahy väčšinu vyššie uvedených možností, tu je ukážka malého kuchynského drezu s rôznymi možnosťami zarovnania rozbaľovacích zoznamov na jednom mieste.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
Obsah menu
Hlavičky
Pridajte hlavičku na označenie sekcií akcií v ľubovoľnej rozbaľovacej ponuke.
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
Rozdeľovače
Skupiny súvisiacich položiek ponuky oddeľte oddeľovačom.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
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 pomocné 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="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<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>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
Dropdown form
</button>
<form class="dropdown-menu p-4">
<div class="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<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>
</div>
Rozbaľovacie možnosti
Pomocou data-bs-offset
alebo data-bs-reference
zmeňte umiestnenie rozbaľovacej ponuky.
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
Správanie automatického zatvárania
V predvolenom nastavení sa rozbaľovacia ponuka zatvorí, keď kliknete do alebo mimo rozbaľovacej ponuky. Toto správanie rozbaľovacej ponuky môžete autoClose
zmeniť pomocou tejto možnosti.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
CSS
Premenné
Pridané vo verzii 5.2.0Ako súčasť vyvíjajúceho sa prístupu premenných CSS od Bootstrapu, rozbaľovacie zoznamy teraz používajú lokálne premenné CSS zapnuté .dropdown-menu
na vylepšené prispôsobenie v reálnom čase. Hodnoty pre premenné CSS sa nastavujú cez Sass, takže prispôsobenie Sass je stále podporované.
--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
Prispôsobenie pomocou premenných CSS je možné vidieť na .dropdown-menu-dark
triede, kde prepisujeme konkrétne hodnoty bez pridávania duplicitných selektorov CSS.
--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
Sass premenné
Premenné pre všetky rozbaľovacie ponuky:
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: var(--#{$prefix}border-color-translucent);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding-x: $dropdown-item-padding-x;
$dropdown-header-padding-y: $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable
Premenné pre tmavý rozbaľovací zoznam :
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
Premenné pre vložky založené na CSS, ktoré označujú interaktivitu rozbaľovacej ponuky:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixins
Mixiny sa používajú na generovanie vsuviek založených na CSS a možno ich nájsť v scss/mixins/_caret.scss
.
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
Použitie
Pomocou 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-bs-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ť.
mouseover
ponuky k bezprostredným potomkom
<body>
prvku prázdne obslužné nástroje. 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
mouseover
obslužné nástroje odstránia.
Cez dátové atribúty
Pridať data-bs-toggle="dropdown"
k odkazu alebo tlačidlu na prepnutie rozbaľovacej ponuky.
<div class="dropdown">
<button type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Cez JavaScript
Zavolajte rozbaľovacie ponuky pomocou JavaScriptu:
const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
data-bs-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-bs-toggle="dropdown"
musí byť vždy prítomná na spúšťacom prvku rozbaľovacej ponuky.
možnosti
Keďže možnosti možno odovzdať prostredníctvom atribútov údajov alebo jazyka JavaScript, môžete pridať názov možnosti k data-bs-
, ako v data-bs-animation="{value}"
. Pri odovzdávaní možností cez atribúty údajov nezabudnite zmeniť typ prípadu názvu možnosti z „ camelCase “ na „ kebab-case “. Napríklad použite data-bs-custom-class="beautifier"
namiesto data-bs-customClass="beautifier"
.
Od Bootstrapu 5.2.0 všetky komponenty podporujú experimentálny atribút rezervovaných údajov data-bs-config
, ktorý môže obsahovať jednoduchú konfiguráciu komponentu ako reťazec JSON. Ak má prvok atribúty data-bs-config='{"delay":0, "title":123}'
a data-bs-title="456"
, konečná title
hodnota bude 456
a samostatné atribúty údajov prepíšu hodnoty uvedené na data-bs-config
. Existujúce dátové atribúty môžu navyše obsahovať hodnoty JSON ako data-bs-delay='{"show":0,"hide":150}'
.
názov | Typ | Predvolené | Popis |
---|---|---|---|
autoClose |
boolean, reťazec | true |
Nakonfigurujte správanie sa automatického zatvárania rozbaľovacej ponuky:
|
boundary |
reťazec, prvok | 'clippingParents' |
Hranica obmedzenia pretečenia rozbaľovacej ponuky (platí len pre Popperov modifikátor preventOverflow). V predvolenom nastavení je clippingParents a môže akceptovať referenciu HTMLElement (iba cez JavaScript). Ďalšie informácie nájdete v dokumentoch Popper's detectOverflow . |
display |
reťazec | 'dynamic' |
Na dynamické polohovanie štandardne používame Popper. Zakázať to pomocou static . |
offset |
pole, reťazec, funkcia | [0, 2] |
Posun rozbaľovacej ponuky vzhľadom na jej cieľ. V atribútoch údajov môžete zadať reťazec s hodnotami oddelenými čiarkou, ako napríklad: data-bs-offset="10,20" . Keď sa funkcia používa na určenie posunu, volá sa s objektom obsahujúcim umiestnenie popper, referenciu a popper rects ako svoj prvý argument. Uzol DOM spúšťacieho prvku sa odovzdá ako druhý argument. Funkcia musí vrátiť pole s dvoma číslami: skiding , distance . Ďalšie informácie nájdete v dokumentoch Popper's ofset . |
popperConfig |
null, objekt, funkcia | null |
Ak chcete zmeniť predvolenú konfiguráciu Popper pre Bootstrap, pozrite si konfiguráciu Poppera . Keď sa funkcia používa na vytvorenie konfigurácie Popper, volá sa s objektom, ktorý obsahuje predvolenú konfiguráciu Popper Bootstrapu. Pomôže vám použiť a zlúčiť predvolené nastavenie s vašou vlastnou konfiguráciou. Funkcia musí vrátiť konfiguračný objekt pre Popper. |
reference |
reťazec, prvok, predmet | 'toggle' |
Referenčný prvok rozbaľovacej ponuky. Prijíma hodnoty 'toggle' , 'parent' , referencie HTMLElement alebo objektu poskytujúceho getBoundingClientRect . Ďalšie informácie nájdete v dokumentoch Popperovho konštruktora a dokumentoch virtuálnych prvkov . |
Použitie funkcie spopperConfig
const dropdown = new bootstrap.Dropdown(element, {
popperConfig(defaultBsPopperConfig) {
// const newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metódy
Metóda | Popis |
---|---|
dispose |
Zničí rozbaľovaciu ponuku prvku. (Odstráni uložené údaje v prvku DOM) |
getInstance |
Statická metóda, ktorá vám umožňuje získať inštanciu rozbaľovacej ponuky priradenú k prvku DOM, môžete ju použiť takto: bootstrap.Dropdown.getInstance(element) . |
getOrCreateInstance |
Statická metóda, ktorá vráti inštanciu rozbaľovacej ponuky priradenú k prvku DOM alebo vytvorí novú v prípade, že nebola inicializovaná. Môžete ho použiť takto: bootstrap.Dropdown.getOrCreateInstance(element) . |
hide |
Skryje rozbaľovaciu ponuku daného navigačného panela alebo navigácie s kartami. |
show |
Zobrazuje rozbaľovaciu ponuku daného navigačného panela alebo navigácie na kartách. |
toggle |
Prepína rozbaľovaciu ponuku daného navigačného panela alebo navigácie s kartami. |
update |
Aktualizuje pozíciu rozbaľovacej ponuky prvku. |
Diania
Všetky udalosti rozbaľovacej ponuky sa spustia pri prepínacom prvku a potom sa prebublávajú. Takže môžete tiež pridať poslucháčov udalostí do .dropdown-menu
nadradeného prvku 's. 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.
Typ udalosti | Popis |
---|---|
hide.bs.dropdown |
Spustí sa okamžite po hide zavolaní metódy inštancie. |
hidden.bs.dropdown |
Spustí sa po dokončení skrytia rozbaľovacej ponuky pred používateľom a dokončení prechodov CSS. |
show.bs.dropdown |
Spustí sa okamžite, keď show je zavolaná metóda inštancie. |
shown.bs.dropdown |
Spustí sa, keď je rozbaľovacia ponuka viditeľná pre používateľa a prechody CSS sú dokončené. |
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
// do something...
})