Lekce 16 - Bootstrap - Dropdowny

V minulé lekci, Bootstrap - Collapse a Accordion, jsme se věnovali Bootstrap komponentě Collapse a její variantě Accordion.

V dnešním tutoriálu CSS frameworku Bootstrap si uvedeme takzvané dropdowny, což jsou rozbalovací tlačítka.

Dropdowny v Bootstrapu

Dropdowny, jejichž českým ekvivalentem by mohly být rolety, jsou komponenty pro zobrazování rozbalovacích menu aktivovaných kliknutím. Dropdowny jsou implementovány pomocí vlastních javascriptových funkcí Bootstrapu.

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-bs-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 jsme použili element <button>, který rozbaluje <div> s několika odkazy. Místo elementu <button> bychom mohli použít i element <a> s třídou .btn. Tomuto tlačítku nebo odkazu přidáváme třídu .dropdown-toggle a data atribut data-bs-toggle="dropdown". To vše je zabalené v prvku <div> s třídou .dropdown. Protože výsuvné menu s 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é dropdowny

Dropdowny lze rozdělit na dvě nezávislá tlačítka, Bootstrap je poté nazývá jako Split dropdown. Jedno tlačítko zabírá většinu plochy a druhé je tvořeno pouze částí s šipkou, která rozbaluje nabídku. Toto rozdělení jsme si již ukazovali v lekci Bootstrap - Další možnosti formulářů. Pro úplnost si tuto variantu ukažme i zde a rovnou přidejme tlačítku i třídu pro nastavení barvy. V ukázce je použita také třída pro zvětšení tlačítka; případné další třídy najdete v lekci Bootstrap - Tlačítka, kde je uveden i kompletní seznam barev:

<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-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="visually-hidden">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

Položky menu můžeme poskládat například 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 (prvku div s třídou .dropdown-menu) přidáme i třídu .dropdown-menu-end.

Do menu můžeme dále přidávat:

• Hlavičky – Obvykle je vkládáme jako elementy <h6> s třídou .dropdown-header.
• Oddělovače – Oddělovače vkládáme jako elementy <div> s třídou .dropdown-divider.
• Formuláře – Pomocí 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 již však nejspíš 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-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Účet
    </button>
    <div class="dropdown-menu dropdown-menu-end">
        <h6 class="dropdown-header">Přihlášení</h6>
        <form class="px-4 py-3">
            <div class="mb-3">
                <label for="prihlaseni-email">E-mail</label>
                <input type="email" class="form-control" id="prihlaseni-email" placeholder="[email protected]">
            </div>
            <div class="mb-3">
                <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>

Třída .mb-3 v Bootstrapu je utility třída, která poskytuje spodní okraj (margin-bottom) o velikosti 1rem.

Výsledek si vyzkoušíme:

JavaScript

Stejně jako všechny předchozí javascriptové komponenty můžeme také dropdowny kromě data atributy inicializovat pomocí JavaScriptu. V Bootstrapu 5 už není potřeba používat jQuery, protože knihovna byla upravena tak, aby pracovala přímo s nativním JavaScriptem. Inicializace dropdownů vypadá takto:

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

Důležité je poznamenat, že i když k inicializaci komponenty používáme JavaScript, data atribut data-bs-toggle="dropdown" je na elementu stále vyžadován. Tento atribut slouží k označení elementu jako dropdown spouštěč, a je proto nezbytný pro správnou funkci komponenty.

Nastavení menu

Dropdowny mají dvě možnosti nastavení, a to buď pomocí atributů (s prefixem data-bs-) nebo javascriptových vlastností:

• offset – Umožní menu posunout relativně k tlačítku. Posouváme buď o stejný rozměr 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říklad "10%, 10px"). Můžeme použít i matematické výpočty.
• flip – Určuje, zda se má menu otočit, jestliže překrývá tlačítko.

Metody

Na instanci komponenty dropdown můžeme volat tyto metody:

• toggle() – Rozbalí/sbalí dropdown menu dané navigační nebo záložkové lišty.
• show() – Zobrazuje rozevírací nabídku daného navigačního panelu nebo navigace na kartách.
• hide() – Skryje rozbalovací nabídku daného navigačního panelu nebo navigace na kartách.
• update() – Aktualizuje pozici dropdown menu daného elementu.
• dispose() – Odstraní dropdown.
• getInstance() – Umožňuje získat instanci rozevíracího seznamu přidruženou k prvku DOM.
• getOrCreateInstance() – Vrátí instanci rozevíracího seznamu přidruženou k prvku DOM nebo vytvoří novou v případě, že instance nebyla inicializována.

Události menu

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 celé menu zabalené):

• show.bs.dropdown – Zavolá se ihned, jakmile 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, když 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 implementujeme například takto:

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('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í.