16. diel - Bootstrap - Dropdowns
V minulej lekcii, Bootstrap - Collapse a Accordion sme sa venovali Bootstrap komponente Collapse a jej variante Accordion. V dnešnom tutoriále najpopulárnejšieho CSS frameworku si uvedieme tzv. Dropdowns, rozbaľovacie tlačidla.
Dropdowns
Dropdowns, najbližšia slovenský ekvivalent asi rolety, je Bootstrap komponent pre zobrazovanie rozbaľovacích sa elementov, ktoré sa rozbalí po kliknutí. Správanie je docielené ako inak než JavaScriptom a to pomocou knižnice Popper.js, ktorá je súčasťou bootstrapového javascriptového balíka.
Ukážka
Ako vždy si urobme základné ukážku. Kód nižšie vykreslí rozbaľovacej tlačidlo s troma 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ýsledok v prehliadači:
V ukážke vyššie je použitý element <button>
, ktorý
rozbaľuje <div>
s niekoľkými odkazy. Namiesto elementu
<button>
by sme mohli použiť aj element
<a>
sa triedou .btn
. Tomuto tlačidlu alebo
odkazu pridávame triedu .dropdown-toggle
a dáta atribút
data-toggle="dropdown"
. To všetko je zabalené v divu s triedou
.dropdown
. Pretože výsuvné menu sa triedou
.dropdown-menu
je zobrazené pomocou absolútnej pozície, má
hlavný <div>
relatívnu pozíciu. Jednotlivým položkám
menu priraďujeme triedu .dropdown-item
. Ak by sme používali
nejaký vlastný zastrešujúcej element, treba mu relatívnu pozíciu
nastaviť.
Rozdelenej dropdowns
Dropdown možno rozdeliť na dve nezávislé tlačidlá, Bootstrap je potom nazýva Split dropdown. Jedno tlačidlo tvorí väčšina tlačidlá a druhé je tvorené iba časťou s šípkou, ktorá rozbaľuje ponuku. Toto rozdelenie sme si už ukazovali v lekcii Ďalšie možnosti formulárov. Pre úplnosť si ukážme aj tu túto variantu a rovno pridajme tlačidlu aj triedu pre nastavenie farby. Kompletný zoznam farieb viď lekcie Tlačidlá. V ukážke je použitá trieda pre zväčšenie tlačidlá, prípadné ďalšie triedy opäť pozri lekcie o tlačidlá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ýsledok:
Kliknutie na vyššie vyvolá prechod na kontaktné stránku centrály. Zároveň však môžeme kliknúť na šípku vpravo a presunúť sa na kontaktné stránky ďalších pobočiek.
Rozbaľovaní smerom nahor
Ak je tlačidlo niekde v spodnej časti webu, môže byť lepšie nechať
ponuku rozbaľovať smerom nahor. To docielime pridaním triedy
.dropup
namiesto triedy .dropdown
.
Položky menu
Až do Bootstrap 4 museli byť položky menu odkazy. Teraz môžeme menu
poskladať napr. Iz elementov <button>
. Menu je v predvolenom
nastavení zarovnané na ľavú stranu tlačidla, ktoré ho otvára. Toto
správanie môžeme zmeniť tým, že menu (divu sa triedou
.dropdown-menu
) pridáme aj triedu
.dropdown-menu-right
.
Do menu môžeme ďalej pridávať:
- Hlavičky - Obvykle vkladáme ako elementy
<h6>
sa triedou.dropdown-header
. - Oddeľovače - oddeľovača vkladáme ako elementy
<div>
sa triedou.dropdown-divider
. - Formuláre - Za pomoci niekoľkých utilít pre margin a padding, ku ktorým sa v kurze ešte dostaneme, môžeme ako položku menu vložiť dokonca celý formulár. Tu ale už možno platí príslovie "menej je niekedy viac"
Položky menu môžeme zneaktívniť priradením triedy
.disabled
.
Ukážme si ešte jedno dropdown menu s vyššie spomínanými prvkami:
<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ýsledok si môžete vyskúšať:
Javascript
Rovnako ako všetky predchádzajúce javascriptové komponenty môžeme dropdowns okrem dátumu atribúty inicializovať aj JavaScriptom. Jedná sa o jQuery plugin, ktorého inicializácia by mohla vyzerať napr. Nasledovne:
$('.dropdown-toggle').dropdown();
Zvláštne je, že dáta atribút data-toggle="dropdown"
je na
elemente stále vyžadovaný a to aj pri ovládaní JavaScriptom.
Nastavenie
Dropdowns majú 2 možnosti nastavenia, ktoré môžeme nastaviť buď cez
atribúty (s prefixom data-
) alebo cez javascriptové
vlastnosti.
offset
- Umožní menu posunúť relatívne k tlačidlu. Posúvame buď o rovnaký kúsok v oboch smeroch zadaním jednej hodnoty alebo zadaním dvoch hodnôt oddelených čiarkou. Viac hodnôt zadávame ako textový reťazec (napr."10%, 10px"
). Môžete použiť aj matematické výpočty.flip
- Určuje, či sa má menu otočiť, ak prekrýva tlačidlo.
Metóde dropdown()
môžeme odovzdať jeden z nasledujúcich
parametrov:
"toggle"
- Rozbalí / zbalí dropdown menu danej navigačnej alebo záložkové lišty."update"
- Aktualizuje pozíciu dropdown menu daného elementu."dispose"
- Odstráni dropdown.
Menu vyvoláva tiež udalosti, na ktoré môžeme v JavaScripte reagovať.
Všetky udalosti vyvoláva rodičovský element menu (typicky hlavný
<div>
, v ktorom je to celé zabalené).
show.bs.dropdown
- Zavolá sa ihneď čo je dropdown vyvolaný.shown.bs.dropdown
- Zobrazí sa vo chvíli, keď je dropdown naozaj viditeľný (po dokončení animácie).hide.bs.dropdown
- Zavolá sa ihneď čo je dropdown uzavretý.hidden.bs.dropdown
- Zobrazí sa vo chvíli, keď je dropdown naozaj neviditeľný (po dokončení animácie).
Reakciu na udalosť môžeme implementovať napr. Nasledovne:
$('#id-dropdown-divu').on('show.bs.dropdown', function () { // reakce na úlohu... });
V budúcej lekcii, Riešené úlohy k 15.-16. lekciu Bootstrap CSS frameworku , si predstavíme všetky Bootstrap utility, ktoré sme si nepopísali počas preberania komponentov.
V nasledujúcom cvičení, Riešené úlohy k 15.-16. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.