Rozbaľovacie ponuky

Pomocou rozbaľovacieho doplnku Bootstrap môžete prepínať kontextové prekrytia na zobrazenie zoznamov odkazov a ďalšie.

Na tejto stránke

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.jsktorý 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 rolea 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-itemprvkami 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 .btnmož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:

html

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

html

<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-splitsprávneho rozmiestnenia okolo rozbaľovacej striešky.

Túto extra triedu používame na zníženie vodorovnej polohy paddingna oboch stranách vsuvky o 25 % a na odstránenie margin-leftpridaný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-darkdo existujúceho .dropdown-menu. V rozbaľovacích položkách nie sú potrebné žiadne zmeny.

html

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

html

<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 .dropstartsa zobrazí na pravej strane.

Vycentrované

Umiestnite rozbaľovaciu ponuku do stredu pod prepínačom pomocou .dropdown-centernadradeného prvku.

html

<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 .dropupdo 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-centernadradeného prvku.

html

<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 .dropenddo 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 .dropstartdo 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>

Ako rozbaľovacie položky môžete použiť prvky <a>alebo .<button>

html

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

html

<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ť .activek 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-currentatribút — pomocou pagehodnoty pre aktuálnu stránku alebo truepre aktuálnu položku v skupine.

html

<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 .disabledpoložky v rozbaľovacej ponuke, aby ste ich označili ako zakázané .

html

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

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-enddo a .dropdown-menuzarovnať rozbaľovaciu ponuku doprava. Pri používaní Bootstrapu v RTL sa zrkadlia pokyny, čo znamená, že .dropdown-menu-endsa zobrazí na ľavej strane.

Hlavy hore! Rozbaľovacie zoznamy sú umiestnené vďaka Popper, okrem prípadov, keď sú obsiahnuté v navigačnom paneli.

html

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

html

<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-enda .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

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

html

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

Hlavičky

Pridajte hlavičku na označenie sekcií akcií v ľubovoľnej rozbaľovacej ponuke.

html

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

html

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

html

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

html

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

html

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

Pomocou data-bs-offsetalebo data-bs-referencezmeňte umiestnenie rozbaľovacej ponuky.

html

<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 autoClosezmeniť pomocou tejto možnosti.

html

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

Ako 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-menuna 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-darktriede, 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 .showtriedy 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ť.

Na zariadeniach s dotykovým ovládaním pridá otvorenie rozbaľovacej mouseoverponuky 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 mouseoverobsluž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á titlehodnota bude 456a 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: `true`- rozbaľovacia ponuka sa zatvorí kliknutím mimo alebo vnútri rozbaľovacej ponuky. `false`- rozbaľovacia ponuka sa zatvorí kliknutím na prepínacie tlačidlo a manuálnym volaním `hide`alebo `toggle`metódou. (Nezatvorí sa ani stlačením `esc`klávesu) `'inside'`- rozbaľovacia ponuka sa zatvorí (iba) kliknutím do rozbaľovacej ponuky. `'outside'`- rozbaľovacia ponuka sa zatvorí (iba) kliknutím mimo rozbaľovacej ponuky. Poznámka: rozbaľovaciu ponuku je možné vždy zatvoriť pomocou `ESC`kľúča.
`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 s`popperConfig`

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-menunadradeného prvku 's. hide.bs.dropdowna hidden.bs.dropdownudalosti majú clickEventvlastnosť (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...
})

Rozbaľovacie ponuky

Prehľad

Prístupnosť

Príklady

Jediné tlačidlo

Rozdeliť tlačidlo

Dimenzovanie

Tmavé rozbaľovacie ponuky

Smery

RTL

Vycentrované

Dropup

Dropup vycentrovaný

Dropend

Dropstart

Položky menu

Aktívne

Zakázané

Zarovnanie ponuky

Responzívne zarovnanie

Možnosti zarovnania

Obsah menu

Hlavičky

Rozdeľovače

Text

Formuláre

Správanie automatického zatvárania

CSS

Premenné

Sass premenné

Mixins

Použitie

Cez dátové atribúty

Cez JavaScript

`data-bs-toggle="dropdown"`stále požadované

možnosti

Použitie funkcie s`popperConfig`

Metódy

Diania

Rozbaľovacie ponuky

Prehľad

Prístupnosť

Príklady

Jediné tlačidlo

Rozdeliť tlačidlo

Dimenzovanie

Tmavé rozbaľovacie ponuky

Smery

RTL

Vycentrované

Dropup

Dropup vycentrovaný

Dropend

Dropstart

Položky menu

Aktívne

Zakázané

Zarovnanie ponuky

Responzívne zarovnanie

Možnosti zarovnania

Obsah menu

Hlavičky

Rozbaľovacia hlavička

Rozdeľovače

Text

Formuláre

Rozbaľovacie možnosti

Správanie automatického zatvárania

CSS

Premenné

Sass premenné

Mixins

Použitie

Cez dátové atribúty

Cez JavaScript

data-bs-toggle="dropdown"stále požadované

možnosti

Použitie funkcie spopperConfig

Metódy

Diania

`data-bs-toggle="dropdown"`stále požadované

Použitie funkcie s`popperConfig`