Lekce 16 - Bootstrap - Dropdowns
V minulé lekci, Bootstrap - Collapse a Accordion jsme se věnovali Bootstrap komponentě Collapse a její variantě Accordion.
V dnešním tutoriálu nejpopulárnějšího CSS frameworku si uvedeme tzv. Dropdowns, rozbalovací tlačítka.
Dropdowns
Dropdowns, nejbližší český ekvivalent asi rolety, je Bootstrap komponenta pro zobrazování rozbalovacích se elementů, které se rozbalí po kliknutí. Chování je docíleno jak jinak než JavaScriptem a to pomocí knihovny Popper.js, která je součástí bootstrapového javascriptového balíku.
Ukázka
Jako vždy si udělejme základní ukázku. Kód níže vykreslí rozbalovací tlačítko se třemi odkazy:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-tlacitko" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Kontakt </button> <div class="dropdown-menu" aria-labelledby="dropdown-tlacitko"> <a class="dropdown-item" href="#">Centrála</a> <a class="dropdown-item" href="#">Pobočka Praha</a> <a class="dropdown-item" href="#">Pobočka Liberec</a> </div> </div>
Výsledek v prohlížeči:
V ukázce výše je použit element <button>
, který
rozbaluje <div>
s několika odkazy. Místo elementu
<button>
bychom mohli použít i element
<a>
se třídou .btn
. Tomuto tlačítku nebo
odkazu přidáváme třídu .dropdown-toggle
a data atribut
data-toggle="dropdown"
. To vše je zabalené v divu s třídou
.dropdown
. Protože výsuvné menu se třídou
.dropdown-menu
je zobrazené pomocí absolutní pozice, má hlavní
<div>
relativní pozici. Jednotlivým položkám menu
přiřazujeme třídu .dropdown-item
. Pokud bychom používali
nějaký vlastní zastřešující element, je třeba mu relativní pozici
nastavit.
Rozdělené dropdowns
Dropdown lze rozdělit na dvě nezávislá tlačítka, Bootstrap je poté nazývá Split Dropdown. Jedno tlačítko tvoří většina tlačítka a druhé je tvořeno pouze částí s šipkou, která rozbaluje nabídku. Toto rozdělení jsme si již ukazovali v lekci Další možnosti formulářů. Pro úplnost si ukažme i zde tuto variantu a rovnou přidejme tlačítku i třídu pro nastavení barvy. Kompletní seznam barev viz lekce Tlačítka. V ukázce je použita třída pro zvětšení tlačítka, případné další třídy opět viz lekce o tlačítkách.
<div class="btn-group"> <a class="btn btn-danger btn-lg" href="">Centrála</a> <button type="button" class="btn btn-danger btn-lg dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Další kontakty</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Pobočka Praha</a> <a class="dropdown-item" href="#">Pobočka Liberec</a> </div> </div>
Výsledek:
Kliknutí na tlačítko výše vyvolá přechod na kontaktní stránku centrály. Zároveň ovšem můžeme kliknout na šipku vpravo a přesunout se na kontaktní stránky dalších poboček.
Rozbalování směrem nahoru
Pokud je tlačítko někde ve spodní části webu, může být lepší
nechat nabídku rozbalovat směrem nahoru. Toho docílíme přidáním třídy
.dropup
namísto třídy .dropdown
.
Položky menu
Až do Bootstrapu 4 musely být položky menu odkazy. Nyní můžeme menu
poskládat např. i z elementů <button>
. Menu je ve
výchozím nastavení zarovnáno na levou stranu tlačítka, které jej
otevírá. Toto chování můžeme změnit tím, že menu (divu se třídou
.dropdown-menu
) přidáme i třídu
.dropdown-menu-right
.
Do menu můžeme dále přidávat:
- Hlavičky - Obvykle vkládáme jako elementy
<h6>
se třídou.dropdown-header
. - Oddělovače - Oddělovače vkládáme jako elementy
<div>
se třídou.dropdown-divider
. - Formuláře - Za pomoci několika utilit pro margin a
padding, ke kterým se v kurzu ještě dostaneme, můžeme jako položku menu
vložit dokonce celý formulář. Zde ale již možná platí rčení "méně je
někdy více"
Položky menu můžeme zneaktivnit přiřazením třídy
.disabled
.
Ukažme si ještě jedno dropdown menu s výše zmíněnými prvky:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-tlacitko" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Účet </button> <div class="dropdown-menu dropdown-menu-right"> <h6 class="dropdown-header">Přihlášení</h6> <form class="px-4 py-3"> <div class="form-group"> <label for="prihlaseni-email">Email</label> <input type="email" class="form-control" id="prihlaseni-email" placeholder="[email protected]"> </div> <div class="form-group"> <label for="prihlaseni-heslo">Heslo</label> <input type="password" class="form-control" id="prihlaseni-heslo" placeholder="******"> </div> <button type="submit" class="btn btn-primary">Přihlásit</button> </form> <div class="dropdown-divider"></div> <a class="dropdown-item disabled" href="#">Registrovat se</a> <a class="dropdown-item" href="#">Zapomněli jste heslo?</a> </div> </div>
Výsledek si můžete vyzkoušet:
JavaScript
Stejně jako všechny předchozí javascriptové komponenty můžeme dropdowns kromě data atributy inicializovat i JavaScriptem. Jedná se o jQuery plugin, jehož inicializace by mohla vypadat např. takto:
$('.dropdown-toggle').dropdown();
Zvláštní je, že data atribut data-toggle="dropdown"
je na
elementu stále vyžadován a to i při ovládání JavaScriptem.
Nastavení
Dropdowns mají 2 možnosti nastavení, které můžeme nastavit buď přes
atributy (s prefixem data-
) nebo přes javascriptové
vlastnosti.
offset
- Umožní menu posunout relativně k tlačítku. Posouváme buď o stejný kousek v obou směrech zadáním jedné hodnoty nebo zadáním dvou hodnot oddělených čárkou. Více hodnot zadáváme jako textový řetězec (např."10%, 10px"
). Můžete použít i matematické výpočty.flip
- Určuje, zda se má menu otočit, pokud překrývá tlačítko.
Metody
Metodě dropdown()
můžeme předat jeden z následujících
parametrů:
"toggle"
- Rozbalí/sbalí dropdown menu dané navigační nebo záložkové lišty."update"
- Aktualizuje pozici dropdown menu daného elementu."dispose"
- Odstraní dropdown.
Události
Menu vyvolává také události, na které můžeme v JavaScriptu reagovat.
Všechny události vyvolává rodičovský element menu (typicky hlavní
<div>
, ve kterém je to celé zabalené).
show.bs.dropdown
- Zavolá se ihned co je dropdown vyvolán.shown.bs.dropdown
- Zobrazí se ve chvíli, kdy je dropdown opravdu viditelný (po dokončení animace).hide.bs.dropdown
- Zavolá se ihned co je dropdown uzavřen.hidden.bs.dropdown
- Zobrazí se ve chvíli, kdy je dropdown opravdu neviditelný (po dokončení animace).
Reakci na událost můžeme implementovat např. takto:
$('#id-dropdown-divu').on('show.bs.dropdown', function () { // reakce na úlohu... });
V následujícím cvičení, Řešené úlohy k 15.-16. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.