22. diel - Bootstrap - Paginácia, upozornenia a omrvinková navigácia

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

V dnešnom tutoriáli CSS frameworku Bootstrap nás čaká niekoľko komponentov. Sú to Pagination, Alerts a Breadcrumb.

Paginácia v Bootstrape

Paginácii, slovensky stránkovaniu, sa u väčšieho počtu dát nevyhneme. Jednak je pre užívateľov nepríjemné prečítať sa mnohými záznamami na jedinej stránke a tiež nám na výpis naozaj veľkého množstva záznamov na jednu stránku už nemusí stačiť výkon servera. Príjemnou alternatívou paginácie je načítanie ďalších položiek AJAXom pri scrollovaní stránky dole. To sa používa najmä na sociálnych sieťach a aj ITnetwork má na hlavnej stránke podobný mechanizmus. Toto riešenie sa však nehodí v prípade, keď sa potrebujeme dostať do určitej časti dát, napríklad do polovice alebo na koniec. Na to je ideálne stránkovanie, kde si zvolíme na ktorú stranu chceme prejsť a zároveň vidíme aj celkový počet stránok. Máme tak oveľa lepší prehľad o danej vzorke dát.

Na pagináciu používame rovnako ako pre väčšinu navigačných prvkov v Bootstrape zoznam, konkrétne element <ul>. Pre lepšiu sémantiku celý zoznam vkladáme ešte do elementu <nav>, pretože paginácia je v podstate navigácia. Ukážme si najskôr zdrojový kód paginačného komponentu, ktorý si čoskoro popíšeme:

<nav aria-label="Pagination">
    <ul class="pagination">
        <li class="page-item disabled">
            <span aria-hidden="true" class="page-link">&laquo;</span>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
    </ul>
</nav>

V kóde máme opäť "aria" atribúty pre hlasové čítačky. Zoznamu sme priradili triedu .pagination. Jednotlivým prvkom zoznamu pridávame triedu .page-item. Prvý prvok je odkaz na predchádzajúcu stránku, ktorý má ikonu dvojitej šípky vľavo («, entita «). Všimnime si, že v ňom nie je odkaz a to preto, aby sme si ukázali, ako to urobiť, ak sme na prvej stránke a na predchádzajúcu stránku sa teda presunúť nemôžeme. Zašednutie prvku docielime triedou .disabled. Ďalšie prvky zoznamu obsahujú odkazy na jednotlivé stránky; tým priraďujeme triedu .page-link. Elementu <li> aktívnej stránky, v tomto prípade stránky 1, navyše pridávame triedu .active. Posledný odkaz je už kompletný. Do atribútov href si samozrejme na serveri vygenerujeme korektné odkazy na dané stránky.

Výsledok v prehliadači:

Pagination in Bootstrap

pagination.html

Teoreticky by sme mohli odkaz umiestniť aj do prvého elementu a vďaka triede .disabled by naň nešlo kliknúť. Prakticky by šiel ale rovnako označiť pomocou klávesy Tab, a preto by sme ho do stránky nemali vôbec umiestňovať alebo by sme k nemu mali priradiť atribút tabindex="-1".

Veľkosti

Pagináciu je možné rovnako ako väčšinu komponentov Bootstrapu zobraziť v troch veľkostiach. Elementu <ul> je možné pridať okrem .pagination ešte triedu:

.pagination-lg - pre väčšiu veľkosť,
pre štandardnú veľkosť ponecháme len triedu .pagination,
.pagination-sm - pre menšiu veľkosť.

Zarovnanie

Na zarovnanie paginácie používame flexbox utility. Pokiaľ ju chceme zarovnať na stred, pridáme elementu <ul> triedu .justify-content-center. Pokiaľ vpravo, pridáme triedu .justify-content-end.

Pagináciu môžeme na serveri oživiť napríklad podľa nášho tutoriálu Paginácia (stránkovanie) v PHP.

Upozornenia v Bootstrape

HTTP je bezstavový protokol a práca s webovými aplikáciami často prebieha jednoduchým prechádzaním medzi odkazmi. Keďže používateľ nekomunikuje s klasickou desktopovou aplikáciou, môže si byť na webe často neistý, či sa jeho požiadavka naozaj medzi jednotlivými prechodmi medzi stránkami správne odoslala alebo naopak prečo nedošlo k očakávanému správaniu. Užívateľovi určite nebudeme zobrazovať vyskakovacie informačné okná (pop-upy). Web sa ovláda inak ako desktop, stránky máme v záložkách, obsahom scrollujeme. Ako upozornenia sa na webe spopularizovali takzvané toastové notifikácie. Toastové preto, že často vyjdú tak, ako toast z hriankovača. Môžeme sa stretnúť aj s názvom flash message. Bootstrap tieto správy zavádza jednoducho ako alerty (upozornenia) a poskytuje pre nich predpripravené štýly a dokonca aj nejaké javascriptové vychytávky.

Alert vytvoríme pomocou elementu <div> s triedou .alert. Podľa typu upozornenia potom pridáme ešte jednu z nasledujúcich tried:

.alert-primary - hlavná farba, ako predvolená modrá,
.alert-secondary - druhá hlavná farba, predvolená šedá,
.alert-success - zelená pre úspešné hlášky,
.alert-danger - červená pre chyby,
.alert-warning - žltá pre zvýraznenie dôležitých hlášok,
.alert-info - neutrálna modrá pre neutrálne hlášky,
.alert-light - svetlo sivá,
.alert-dark - takmer čierna.

Zdrojový kód takého alertu vyzerá nasledovne:

<div class="alert alert-success" role="alert">
    The message has been sent successfully.
</div>

Atribút role slúži pre hlasové čítačky. Okrem farby by sme ideálne mali opäť pridať aj text pre hlasové čítačky skrytý pomocou triedy .visually-hidden, kde bude typ tejto hlášky popísaný.

Použitie alertov na stránke vyzerá následne takto:

Alert in Bootstrap

alert.html

Farba odkazu

Do hlášok často vkladáme odkazy. Tie sa sfarbia, pokiaľ im priradíme triedu .alert-link.

Ďalší HTML obsah

Keďže sú upozornenia blokové elementy, môžeme do nich okrem textu a odkazov vkladať aj nadpisy, odseky, oddeľovače a ďalší HTML obsah.

Zatváranie hlášok

Pokiaľ si načítame JavaScript k Bootstrapu a pridáme alertom triedu .alert-dismissible, užívateľ ích následne môže zavrieť pomocou ikonky krížika v pravom hornom rohu. Tlačidlo musíme do HTML kódu pridať v podobe elementu <button> s triedou .btn-close a data atribútom data-bs-dismiss="alert". Pokiaľ pridáme ešte triedy .fade a .show, získame animácie.

Zdrojový kód uzatvárateľnej hlášky s odkazom a ďalším HTML obsahom vyzerá napríklad takto:

<div class="alert alert-success alert-dismissible fade show" role="alert">
    <p><strong>Signing up has been successful</strong>, a confirmation mail should arrive at your email address.</p>
    <hr>
    <p>You are just one step away from your new IT knowledge and a great job!</p>
    <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Pozrime sa na výstup v prehliadači:

Advanced alerts in Bootstrap

advanced_alerts.html

Uzavretie hlášky element zo stránky kompletne odstráni. V JavaScripte je možné na uzavretie alertu ešte reagovať, môžeme ho napríklad uložiť do cookie, aby sa už nabudúce nezobrazoval:

var alertNode = document.querySelector('.alert');
bootstrap.Alert.getInstance(alertNode);

// Adding a listener for an alert closing event
alertNode.addEventListener('closed.bs.alert', function () {
    // ... Code to save a cookie ...
});

// Add listener for close alert button
document.querySelector('.alert .close').addEventListener('click', function() {
    // This code is launched when the user clicks the close button
    // The alert will close due to the default Bootstrap function, the 'closed.bs.alert' event will be called
});

Close utilita

Zatváracie tlačidlo môžeme používať aj na akékoľvek ďalšie účely mimo upozornení. Vytvoríme ho nasledujúcim spôsobom:

<button type="button" class="btn-close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

Zatváranie si musíme napísať sami pomocou JavaScriptu.

Breadcrumb v Bootstrape

Omrvinková (Breadcrumb) navigácia je bezpochyby dôležitým ovládacím prvkom väčších webov. Určite sme ju už niekedy videli, máme ju aj tu na ITnetworku, kde signalizuje v akej sme sekcii a aké sekcie sú nad nami. O trochu vyššie by sme mali vidieť niečo ako Home -> HTML and CSS -> Bootstrap. Náhodný užívateľ z internetu teda pri vygooglení tohto článku jednoducho zistí, že ITnetwork.sk nie je stránka len o Bootstrape, ale že sa jedná o nejaký kurz a možno klikne na sekciu HTML a CSS a začne sa zaujímať o ďalší kurz web dizajnu. Alebo klikne na domček a zistí, že učíme aj všetky ďalšie IT technológie. Určite chceme, aby naši používatelia web takto preskúmali.

Navigácia funguje ako keď Janko s Marienkou trúsili omrvinky, aby sa mohli vrátiť z temného lesa domov. Aj užívateľ, ktorý sa ocitne na nejakej zanorenej podstránke, sa môže chcieť vrátiť o kategóriu vyššie, v čom mu nie vždy pomôže tlačidlo "Späť". Pokiaľ mu túto funkciu neumožníme, je možné, že stránku radšej frustrovaný opustí, než aby zisťoval, ako sa do danej sekcie dostane. Na veľmi jednoduchých informačných weboch je naopak omrvinková navigácia viac na škodu, pretože je tak dizajn stránky zložitejší a vďaka plytkým kategóriám nemá žiadnu pridanú hodnotu.

Asi nás neprekvapí, že navigáciu do stránky vkladáme ako naštýlovaný zoznam. Keďže záleží na poradí prvkov, sémanticky je najsprávnejšie využiť element <ol>:

<nav aria-label="Breadcrumb navigation" role="navigation">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">HTML and CSS</a></li>
        <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
    </ol>
</nav>