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