20. diel - Bootstrap - Navigácia

V predchádzajúcom cvičení, Riešené úlohy k 17.-19. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriáli CSS frameworku Bootstrap sa naučíme štylovať navigáciu.

Navigácia v Bootstrape

Kedykoľvek budeme v našej prezentácii potrebovať navigáciu, nemusíme pre štýly chodiť ďaleko. Bootstrap má pre nás pripravenú ako samostatnú navigáciu, tak aj responzívnu navigačnú lištu s vyrážajúcim menu. V dnešnej lekcii sa budeme venovať samostatnej navigácii, pre ktorú máme k dispozícii triedu .nav.

Ukážme si najskôr ako komponent vyzerá. Na reprezentáciu prvkov navigácie použijeme položky zoznamu:

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">About us</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
</ul>

Výsledok v prehliadači:

Prvkom navigácie priraďujeme triedu .nav-link. Na označenie aktívneho odkazu v navigácii používame triedu .active a na zneaktívnenie niektorých položiek používame .disabled. Tu ešte používame atribút tabindex="-1". Jeho hodnota -1 užívateľom znemožní na tento prvok prejsť pomocou klávesnice.

Element <nav> a zarovnanie

Okrem zoznamu môžeme použiť aj obyčajné odkazy bez ďalších elementov, ktoré uzavrieme do elementu <nav>, opäť s triedou .nav. Rovnú si ukážme aj ako položky v navigácii zarovnať vodorovne. Keďže celá navigácia je postavená na flexboxe, použijeme nám už známych flexbox utilít. Konkrétne na zarovnanie na stred využijeme triedu .justify-content-center:

<nav class="nav justify-content-center">
    <a class="nav-link active" aria-current="page" href="#">About us</a>
    <a class="nav-link" href="#">Products</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    <a class="nav-link" href="#">Contact</a>
</nav>

A výsledok:

Na zarovnanie vpravo by sme použili triedu .justify-content-end.

Zvislá navigácia

Pokiaľ by sme chceli navigáciu naštylovať ako zvislú, využijeme triedy .flex-column. Zvislé navigácie sa uplatnia najmä na menších displejoch, preto môžeme jednoducho navigáciu naštýlovať aj ako vodorovnú na počítačoch a zvislú na telefónoch. Na to by sme využili napríklad triedy .flex-sm-row:

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link" aria-current="page" href="#">About us</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
</ul>

Výsledok:

Opačného správania by sme docielili triedou .flex-sm-column, kedy by bola navigácia zvislá na počítačoch a vodorovná na telefónoch. Ako ďalšie by sme mohli využiť responzívnu triedu ako .text-sm-center, ktorú by sme priradili položkám a tá by ich na počítačoch centrovala a na mobiloch, kde je navigácia zvislá, by ich nechala zarovnané vľavo ako zvislý zoznam.

Záložky

Navigáciu môžeme jednoducho naštylovať ako záložky pridaním triedy .nav-tabs. Je tu podporovaná aj trieda .active. K plnej funkcionalite je potrebné nalinkovať aj javascriptový plugin Bootstrapu:

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Aboout the company</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Products</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Hobby</a>
            <a class="dropdown-item" href="#">Kitchen</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Garden</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
</ul>

Výsledok v prehliadači:

Všimnime si, že v jednej záložke je použité aj rozbaľovacie tlačidlo Dropdown z lekcie Bootstrap - Dropdowns.

Pilulky

Podobne môžeme z odkazov urobiť aj "tabletky" pridaním triedy .nav-pills. Rovnou si ukážeme využitie aj ďalšej triedy, .nav-fill, ktorá roztiahne obsah navigácie tak, aby vyplnil celú jej šírku. Pre prvky s rovnakou šírkou použijeme aj .nav-justified. Všetok vodorovný priestor bude obsadený navigačnými odkazmi, ale na rozdiel od vyššie uvedeného .nav-fill bude každá navigačná položka rovnako široká.

Pokiaľ by sme k definícii navigácie využili element <nav> a odkazy <a>, teda skrátenú verziu bez zoznamu, odkazom už nemusíme priraďovať triedu .nav-item. Ukážme si tento príklad:

<nav class="nav nav-pills nav-fill">
    <a class="nav-link active" aria-current="page" href="#">About us</a>
    <a class="nav-link" href="#">Products</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    <a class="nav-link" href="#">Contact</a>
</nav>

V prehliadači:

Ak by sme chceli pridať aj Dropdown, postupovali by sme rovnako ako pri záložkách a využili by sme definíciu pomocou zoznamu:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">About us</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Products</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Hobby</a>
            <a class="dropdown-item" href="#">Kitchen</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Garden</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
</ul>

V prehliadači:

Sémantika

Navigáciu pomocou zoznamu <ul> musíme priraďovať nadradenému rodičovskému prvku aj atribút role="navigation" pre hlasové čítačky alebo ju obaliť ešte do sémantického elementu <nav>. Do atribútu role NEuvádzame hodnoty tablist, tab ani tabpanel a to aj keď v navigácii záložky používame, pretože tieto role slúžia pre dynamický obsah, ktorý záložky prepínajú. Dynamické záložky by sme nemali kombinovať s Dropdown tlačidlami, pretože môže byť mätúce, že "aktivačné" tlačidlo nebude hneď spočiatku viditeľné, ale bude schované spolu so záložkou.

Dynamické záložky

Keďže sme dynamické záložky už niekoľkokrát spomenuli, poďme si ukázať, ako ich na navigáciu napojiť. Nezabudnime pripojiť JavaScript:

<ul class="nav nav-tabs" id="navigation" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="about-company-tab" data-bs-toggle="tab" data-bs-target="#about-company" role="tab" aria-controls="about-company" aria-selected="true">AAbout us</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" id="products-tab" data-bs-toggle="tab" data-bs-target="#products" role="tab" aria-controls="products" aria-selected="false">Products</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </li>
</ul>
<div class="tab-content" id="navigation">
    <div class="tab-pane fade show active" id="about-company" role="tabpanel" aria-labelledby="about-company-tab">The About us tab contents...</div>
    <div class="tab-pane fade" id="products" role="tabpanel" aria-labelledby="products-tab">The Products tab contents...</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">The Contact tab contents...</div>
</div>

Výsledok:

Všimnime si využitie tried .fade a .show na dosiahnutie animácie. Nasleduje zjednodušená verzia s elementom <nav>:

<nav class="nav nav-tabs" id="navigation" role="tablist">
            <button class="nav-item nav-link active" id="about-company-tab" data-bs-toggle="tab" data-bs-target="#about-company" role="tab" aria-controls="about-company" aria-selected="true">About us</button>
            <button class="nav-item nav-link" id="products-tab" data-bs-toggle="tab" data-bs-target="#products" role="tab" aria-controls="products" aria-selected="false">Products</button>
            <button class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
        </nav>
        <div class="tab-content" id="navigation">
            <div class="tab-pane fade show active" id="about-company" role="tabpanel" aria-labelledby="about-company-tab">The About us tab contents...</div>
            <div class="tab-pane fade" id="products" role="tabpanel" aria-labelledby="products-tab">The Products tab contents...</div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">The Contact tab contents...</div>
        </div>

Výstup v prehliadači:

Navigáciu s dynamickými záložkami môžeme vytvoriť aj s pomocou tabletiek, stačí namiesto triedy .nav-tabs priradiť triedu .nav-pills. Ideálne by sme mali zmeniť aj hodnotu dáta atribútu data-bs-toggle z tab na pill. Dokonca môžeme záložky umiestniť aj vertikálne, tento príklad si ukážeme:

<div class="row">
    <div class="col-3">
    <div class="nav flex-column nav-pills" id="navigation" role="tablist" aria-orientation="vertical">
        <button class="nav-link active" id="about-company-tab" data-bs-toggle="pill" href="#about-company" role="tab" aria-controls="about-company" aria-selected="true">About us</button>
        <button class="nav-link" id="products-tab" data-bs-toggle="pill" href="#products" role="tab" aria-controls="products" aria-selected="false">Products</button>
        <button class="nav-link" id="contact-tab" data-bs-toggle="pill" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </div>
</div>
<div class="col-9">
    <div class="tab-content" id="navigation-content">
        <div class="tab-pane fade show active" id="about-company" role="tabpanel" aria-labelledby="about-company-tab">The About us tab contents...</div>
        <div class="tab-pane fade" id="products" role="tabpanel" aria-labelledby="products-tab">The Products tab contents...</div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">The Contact tab contents...</div>
    </div>
</div>

Výstup v prehliadači:

V ukážke je použitý responzívny grid, ktorý si podrobne vysvetlíme ďalej v kurze.

JavaScript

Ako pri väčšine komponentov, aj pri navigácii môžeme ovplyvňovať správanie JavaScript pluginov. Ako vždy môžeme využívať na prispôsobenie správania buď dáta atribúty alebo k jednotlivým vlastnostiam pristupovať pomocou JavaScriptu. Vlastnosti majú v JavaScripte rovnakého názvu ako dáta atribúty (bez prefixu data-bs-). Jedná sa o dáta atribút data-bs-toggle s hodnotou tab alebo pill.

Cez JavaScript by sme bez dátumu atribútov inicializovali záložky ako:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Záložky môžeme tiež aktivovať individuálne nasledujúcimi spôsobmi:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Selection by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Selecting the first tab

Metódy triedy Tab

Trieda Tab v Bootstrape poskytuje nasledujúce metódy pre prácu s jej inštanciami:

• dispose() - Táto metóda zničí inštanciu záložky, uvoľní všetky jej prostriedky a odstráni príslušné poslucháčov udalostí.
• show() - Metóda aktivuje a zobrazí záložku spojenú s danou inštanciou triedy Tab.
• getInstance(element) - Statická metóda, ktorá získa inštanciu Tab spojenú s určeným DOM elementom. Ak taká inštancia neexistuje, vráti null.
• getOrCreateInstance(element, config) - Statická metóda, ktorá získa existujúcu inštanciu Tab spojenú s DOM elementom alebo vytvorí novú inštanciu, pokiaľ žiadna nie je nájdená. Voliteľný parameter config môže byť použitý pre nastavenie inštancie.

Využitie metód v praxi

Zobrazenie záložky vyzerá nasledovne:

var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)

tab.show()

Získanie inštancie tab spojené s DOM elementom:

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl)

Získanie inštancie tab spojené s DOM elementom, alebo vytvorenie novej, pokiaľ nebola inicializovaná:

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl)

Na aktivovanie určitej záložky postupujeme nasledovne.

Na otvorenie záložky podľa mena:

var triggerEl = document.querySelector('#tabs a[href="#products"]');
var tab = new bootstrap.Tab(triggerEl);

tab.show();

Na otvorenie prvej záložky:

var firstTabEl = document.querySelector('#tabs a:first-child');
var firstTab = new bootstrap.Tab(firstTabEl);

firstTab.show();

Pre otvorenie poslednej záložky:

var lastTabEl = document.querySelector('#tabs a:last-child');
var lastTab = new bootstrap.Tab(lastTabEl);

lastTab.show();

Pre otvorenie konkrétnej záložky (tu štvrtej):

var specificTabEl = document.querySelector('#tabs li:nth-child(4) a');
var specificTab = new bootstrap.Tab(specificTabEl);

specificTab.show();

Metódy sú asynchrónne a odovzdajú riadenie skôr, než dôjde naozaj k prepnutiu záložky! Je to z dôvodu prebiehajúcej animácie. Ak animácia (transition) práve prebieha, budú všetky volania metód ignorované.

Udalosti

Reagovať môžeme v JavaScripte aj na nasledujúce udalosti:

• hide.bs.tab - Udalosť vyvolaná na aktívnej záložke, keď je na ceste k deaktivácii kvôli zobrazeniu novej záložky.
• show.bs.tab - Udalosť vyvolaná na záložke, ktorá sa bude zobrazovať, ale ešte než je zobrazená.
• hidden.bs.tab - Udalosť vyvolaná na pôvodne aktívnej záložke, ale až po tom, čo bola deaktivovaná a zobrazila sa nová záložka.
• shown.bs.tab - Udalosť vyvolaná na novo aktívnej záložke po jej zobrazení.

Reakcia na udalosť bude vyzerať napríklad takto:

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // Newly activated tab
  event.relatedTarget // Previous active tab
})

V budúcej lekcii, Bootstrap - Navigačná lišta, si ukážeme, ako napísať responzívnu navigačnú lištu.