16. diel - Bootstrap - Dropdowns

V minulej lekcii, Bootstrap - Collapse a Accordion, sme sa venovali Bootstrap komponentu Collapse a jej variantu Accordion.

V dnešnom tutoriáli CSS frameworku Bootstrap si uvedieme takzvané Dropdowns, čo sú rozbaľovacie tlačidlá.

Dropdowns v Bootstrape

Dropdowns, ktorých najbližší slovenský ekvivalent je asi rolety, sú komponenty na zobrazovanie rozbaľovacích menu aktivovaných kliknutím. Dropdowny sú implementované pomocou vlastných JavaScriptových funkcií Bootstrapu.

Ako vždy si urobme základnú ukážku. Kód nižšie vykreslí rozbaľovacie tlačidlo s tromi odkazmi:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Contact
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdown-button">
        <a class="dropdown-item" href="#">Headquarters</a>
        <a class="dropdown-item" href="#">New York Branch Office</a>
        <a class="dropdown-item" href="#">Los Angeles Branch Office</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 odkazmi. Namiesto elementu <button> by sme mohli použiť aj element <a> s triedou .btn. Tomuto tlačidlu alebo odkazu pridávame triedu .dropdown-toggle a data atribút data-bs-toggle="dropdown". To všetko je zabalené v divu s triedou .dropdown. Pretože výsuvné menu s 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úci element, treba mu relatívnu pozíciu nastaviť.

Rozdelené dropdowns

Dropdown je možné rozdeliť na dve nezávislé tlačidlá, Bootstrap ich potom nazýva Split Dropdown. Jedno tlačidlo tvorí väčšinu tlačidla a druhé je tvorené iba časťou so šípkou, ktorá rozbaľuje ponuku. Toto rozdelenie sme si už ukazovali v lekcii Bootstrap – Ďalšie možnosti formulárov. Pre úplnosť si ukážme aj tu tento variant a rovno pridajme tlačidlu aj triedu pre nastavenie farby. Kompletný zoznam farieb nájdeme v lekcii Bootstrap - Tlačidlá. V ukážke je použitá trieda pre zväčšenie tlačidla, prípadné ďalšie triedy opäť viď lekcie o tlačidlách:

<div class="btn-group">
    <a class="btn btn-danger btn-lg" href="">Headquarters</a>
    <button type="button" class="btn btn-danger btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="visually-hidden">Other contacts</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">New York Branch Office</a>
        <a class="dropdown-item" href="#">Los Angeles Branch Office</a>
    </div>
</div>

Výsledok:

Kliknutie na tlačidlo vyššie vyvolá prechod na kontaktnú stránku centrály. Zároveň však môžeme kliknúť na šípku napravo a presunúť sa na kontaktné stránky ďalších pobočiek.

Rozbaľovanie smerom hore

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

Položky menu môžeme poskladať napríklad aj z 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 s triedou .dropdown-menu) pridáme aj triedu .dropdown-menu-end.

Do menu môžeme ďalej pridávať:

• hlavičky - obvykle vkladáme ako elementy <h6> s triedou .dropdown-header,
• oddeľovače - oddeľovače vkladáme ako elementy <div> s 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-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Account
    </button>
    <div class="dropdown-menu dropdown-menu-end">
        <h6 class="dropdown-header">Login</h6>
        <form class="px-4 py-3">
            <div class="mb-3">
                <label for="login-email">Email</label>
                <input type="email" class="form-control" id="login-email" placeholder="[email protected]">
            </div>
            <div class="mb-3">
                <label for="login-password">Password</label>
                <input type="password" class="form-control" id="login-password" placeholder="******">
            </div>
            <button type="submit" class="btn btn-primary">Login</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item disabled" href="#">Register</a>
        <a class="dropdown-item" href="#">Forgot your password?</a>
    </div>
</div>

Trieda .mb-3 v Bootstrape je utility trieda, ktorá poskytuje spodný okraj (margin-bottom) o veľkosti 1rem.

Výsledok si vyskúšame:

JavaScript

Rovnako ako všetky predchádzajúce javascriptové komponenty môžeme dropdowns okrem dáta atribúty inicializovať pomocou JavaScriptu. V Bootstrape 5 už nie je potrebné používať jQuery, pretože knižnica bola upravená tak, aby pracovala priamo s natívnym JavaScriptom. Inicializácia dropdownov vyzerá takto:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

Dôležité je poznamenať, že aj keď používame JavaScript na inicializáciu komponentu, dáta atribút data-bs-toggle="dropdown" je na elemente stále vyžadovaný. Tento atribút slúži na označenie elementu ako dropdown spúšťač a je nevyhnutný pre správnu funkciu komponentu.

Nastavenie menu

Dropdowns majú dve možnosti nastavenia a to buď cez atribúty (s prefixom data-bs-) 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íklad "10%, 10px"). Môžeme použiť aj matematické výpočty.
• flip - určuje, či sa má menu otočiť, pokiaľ prekrýva tlačidlo.

Metódy

Na inštancii komponentu dropdown môžeme volať tieto metódy:

• toggle() - rozbalí/zbalí dropdown menu danej navigačnej alebo záložkovej lišty,
• show() - zobrazuje otváraciu ponuku daného navigačného panelu alebo navigácie na kartách,
• hide() - skryje rozbaľovaciu ponuku daného navigačného panelu alebo navigácie na kartách,
• update() - aktualizuje pozíciu dropdown menu daného elementu,
• dispose() - odstráni dropdown,
• getInstance() - umožňuje získať inštanciu rozbaľovacieho zoznamu pridruženú k prvku DOM,
• getOrCreateInstance() - vráti inštanciu rozbaľovacieho zoznamu pridruženú k prvku DOM alebo vytvorí novú v prípade, že nebola inicializovaná.

Udalosti menu

Menu vyvoláva aj udalosti, na ktoré môžeme v JavaScripte reagovať. Všetky udalosti vyvoláva rodičovský element menu (typicky hlavné <div>, v ktorom je celé menu zabalené):

• show.bs.dropdown - zavolá sa ihneď, keď je dropdown vyvolaný,
• shown.bs.dropdown - zobrazí sa vo chvíli, keď je dropdown skutočne viditeľný (po dokončení animácie),
• hide.bs.dropdown - zavolá sa ihneď, keď 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ť implementujeme napríklad takto:

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
    // response to the task...
});

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