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 nejpopulárnějšího CSS frameworku si uvedeme tzv. Dropdowns, rozbalovací tlačítka.

Dropdowns

Dropdowns, nejbližší český ekvivalent asi rolety, je Bootstrap komponenta pro zobrazování rozbalovacích se elementů, které se rozbalí po kliknutí. Chování je docíleno jak jinak než JavaScriptem a to pomocí knihovny Popper.js, která je součástí bootstrapového javascriptového balíku.

Ukázka

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-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-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šina tlačítka a druhé je tvořeno pouze částí s šipkou, která rozbaluje nabídku. Toto rozdělení jsme si již ukazovali v lekci 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 viz lekce 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-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>

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

Až do Bootstrapu 4 musely být položky menu odkazy. Nyní můžeme menu poskládat např. 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-right.

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-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ýsledek si můžete vyzkoušet:

JavaScript

Stejně jako všechny předchozí javascriptové komponenty můžeme dropdowns kromě data atributy inicializovat i JavaScriptem. Jedná se o jQuery plugin, jehož inicializace by mohla vypadat např. takto:

$('.dropdown-toggle').dropdown();

Zvláštní je, že data atribut data-toggle="dropdown" je na elementu stále vyžadován a to i při ovládání JavaScriptem.

Nastavení

Dropdowns mají 2 možnosti nastavení, které můžeme nastavit buď přes atributy (s prefixem data-) 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ř. "10%, 10px"). Můžete použít i matematické výpočty.
• flip - Určuje, zda se má menu otočit, pokud překrývá tlačítko.

Metody

Metodě dropdown() můžeme předat jeden z následujících parametrů:

• "toggle" - Rozbalí/sbalí dropdown menu dané navigační nebo záložkové lišty.
• "update" - Aktualizuje pozici dropdown menu daného elementu.
• "dispose" - Odstraní dropdown.

Události

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 to celé zabalené).

• show.bs.dropdown - Zavolá se ihned co 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 co 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 můžeme implementovat např. takto:

$('#id-dropdown-divu').on('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í.