16. diel - Bootstrap - Dropdowns

V minulej lekcii, Bootstrap - Collapse a Accordion, sme sa venovali Bootstrap komponentu Collapse a jeho 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 zobrazí 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:

Dropdowns in Bootstrap

dropdowns.html

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 dive 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, je potrebné 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 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, no prípadné ďalšie triedy si môžeš pozrieť v lekcii 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:

Dropdowns in Bootstrap

dropdowns_split.html

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 nahor

Ak je tlačidlo niekde v spodnej časti webu, môže byť lepšie zvoliť rozbaľovaciu ponuku smerom nahor. To docielime pridaním triedy .dropup namiesto triedy .dropdown.

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 (div 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 - pomocou 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 už ale platí, že "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="your@email.com">
            </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:

Dropdowns in Bootstrap

dropdowns_split.html

JavaScript

Rovnako ako všetky predchádzajúce javascriptové komponenty, môžeme dropdowns data atribúty inicializovať pomocou JavaScriptu. V Bootstrap 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, data 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.

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

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. lekcii CSS frameworku Bootstrap, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

Absolvované

Označiť lekciu ako neabsolvovanú