22. diel - Bootstrap - Paginácia, Upozornenie a Drobčeková navigácia

V predchádzajúcom cvičení, Riešené úlohy k 20.-21. 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 nás čaká niekoľko komponentov. Sú to Pagination, Alerts a Breadcrumb.

Paginácia v Bootstrape

Pagináciu, slovensky stránkovanie, 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 rolovaní 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. K tomu je ideálne stránkovanie, kde si zvolíme na ktorú stránku chceme prejsť a 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, to aby sme si ukázali, ako to urobiť, ak sme na prvej stránke a na predchádzajúcu stránku sa teda presunúť nemožno. 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, tu 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:

Teoreticky by sme mohli odkaz do prvého elementu umiestniť aj 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 Bootstrapových komponentov zobraziť v troch veľkostiach. Elementu <ul> je možné dodať 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.

Upozornenie 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 korektne odoslala alebo naopak prečo nedošlo k očakávanému správaniu. Určite užívateľovi 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 rolujeme. Na účel upozornenia sa na webe spopularizovali takzvané toastové notifikácie. Toastové preto, že často vyjdú ako toast z hriankovača. Môžeme sa stretnúť aj s názvom flash message. Bootstrap tieto správy zavádza jednoducho ako alerty (upozornenie) 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á na ú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 - svetlunka 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 v stránke vyzerá následne takto:

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, môže ich užívateľ následne 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, docielime 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:

Uzavretie hlášky element zo stránky kompletne odstráni. V JavaScripte je možné na uzavretie alertu ešte reagovať, môžeme tu 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 upozornenia. 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

Drobčeková (Breadcrumb) navigácia je bezpochyby dôležitým ovládacím prvkom väčších webov. Iste 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 kus 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 webdesignu. 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 boli motivovaní web takto preskúmavať.

Navigácia funguje ako keď Janko s Marienkou trúsili drobčeky, 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 funkčnosť 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 drobčeková navigácia na škodu, pretože zosložituje dizajn stránky 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 ostylovaný 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>

Atribút aria-label je opäť dodatočný popis pre hlasové čítačky.

Výsledok v prehliadači:

V budúcej lekcii, Bootstrap - Modálne dialógy, sa budeme venovať modálnym dialógom.