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.js , 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.js. Popper.js 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 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 pomocou ESCklávesu.

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

A s <a>prvkami:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

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-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

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-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Smery

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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

Spustite rozbaľovacie ponuky napravo od prvkov pridaním .droprightdo nadradeného prvku.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

Spustite rozbaľovacie ponuky naľavo od prvkov pridaním .dropleftdo nadradeného prvku.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Obsahom rozbaľovacej ponuky v minulosti 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" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

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ť .activek položkám v rozbaľovacej ponuke, aby ste ich naštýlovali 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 .disabledpolož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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

V predvolenom nastavení je rozbaľovacia ponuka automaticky umiestnená 100 % zhora a pozdĺž ľavej strany nadradenej položky. Pridať .dropdown-menu-rightdo a .dropdown-menuzarovnať rozbaľovaciu ponuku doprava.

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

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

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 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="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

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 nadradenej položke zoznamu. 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ť.

Na zariadeniach s dotykovým ovládaním pridá otvorenie rozbaľovacej ponuky k bezprostredným potomkom prvku prázdne obslužné nástroje ( $.noop) . Tento, pravdaže, škaredý hack je potrebný na obídenie vtipu v delegovaní udalosti v systéme iOS , ktorý by inak zabránil 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 id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Cez JavaScript

Vyvolajte 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 cez JavaScript 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ľ. Ďalšie informácie nájdete v dokumentoch offsetu Popper.js .
prevrátiť	boolovská hodnota	pravda	V prípade prekrytia referenčného prvku povoľte rozbaľovaciu ponuku prevrátiť. Ďalšie informácie nájdete v dokumentoch pre popper.js .
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 preventOverflow Popper.js .
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 referenceObject Popper.js .
displej	reťazec	'dynamic'	Štandardne používame na dynamické polohovanie Popper.js. Zakázať to pomocou `static`.

Všimnite si, že keď boundaryje nastavená na inú hodnotu ako 'scrollParent', štýl position: staticsa použije na .dropdownkontajner.

Metódy

Metóda	Popis
`$().dropdown('toggle')`	Prepína 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-menunadradenom prvku 's a majú relatedTargetvlastnosť, ktorej hodnota je prepínací prvok kotvy. hide.bs.dropdowna hidden.bs.dropdownudalosti majú clickEventvlastnosť (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…
})

Rozbaľovacie ponuky

Prehľad

Prístupnosť

Príklady

Jediné tlačidlo

Rozdeliť tlačidlo

Dimenzovanie

Smery

Dropup

Dropright

Dropleft

Položky menu

Aktívne

Zakázané

Zarovnanie ponuky

Obsah menu

Hlavičky

Rozdeľovače

Text

Formuláre

Použitie

Cez dátové atribúty

Cez JavaScript

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

možnosti

Metódy

Diania

Rozbaľovacie ponuky

Prehľad

Prístupnosť

Príklady

Jediné tlačidlo

Rozdeliť tlačidlo

Dimenzovanie

Smery

Dropup

Dropright

Dropleft

Položky menu

Aktívne

Zakázané

Zarovnanie ponuky

Obsah menu

Hlavičky

Rozbaľovacia hlavička

Rozdeľovače

Text

Formuláre

Rozbaľovacie možnosti

Použitie

Cez dátové atribúty

Cez JavaScript

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

možnosti

Metódy

Diania

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