Lekce 16 - Bootstrap - Dropdowns

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é Dropdowns, což jsou rozbalovací tlačítka.

Dropdowns v Bootstrapu

Dropdowns, jejichž nejbližší český ekvivalent je asi 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 je použit element <button>, který rozbaluje <div> s několika odkazy. Místo elementu <button> bychom mohli použít i element <a> se 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 divu s třídou .dropdown. Protože výsuvné menu se 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é dropdowns

Dropdown lze rozdělit na dvě nezávislá tlačítka, Bootstrap je poté nazývá Split Dropdown. Jedno tlačítko tvoří většinu tlačítka 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 ukažme i zde tuto variantu a rovnou přidejme tlačítku i třídu pro nastavení barvy. Kompletní seznam barev najdeme v lekci Bootstrap - Tlačítka. V ukázce je použita třída pro zvětšení tlačítka, případné další třídy opět viz lekce o tlačítká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-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 (divu se 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 vkládáme jako elementy <h6> se třídou .dropdown-header,
• oddělovače - oddělovače vkládáme jako elementy <div> se třídou .dropdown-divider,
• formuláře - za pomoci 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 ale již možná 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">Email</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 dropdowns 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ž používáme JavaScript pro inicializaci komponenty, 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 nezbytný pro správnou funkci komponenty.

Nastavení menu

Dropdowns mají dvě možnosti nastavení a to buď přes atributy (s prefixem data-bs-) nebo přes javascriptové vlastnosti:

• offset - umožní menu posunout relativně k tlačítku. Posouváme buď o stejný kousek 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, pokud 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 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, když 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í.