12. diel - Bootstrap - List groups

V minulej lekcii, Bootstrap - Jumbotron a Badges, sme sa zaoberali základnou kostrou webu a badges.

V dnešnom Bootstrap tutoriále sa zameriame na zoznamy. Ukážeme si, ako sa používajú s odkazmi, tlačidlami, odznakmi a taby.

List groups v Bootstrape

List groups, po slovensky by sme povedali zoznamové skupiny, sú zoznamy, do ktorých môžeme vložiť v podstate ktorýkoľvek odkaz. Vykresľujú sa zvisle a obvykle sa využívajú v kombinácii s grid systémom, kedy pomocou nich zobrazíme zoznam položiek ako jeden zo stĺpcov layoutu stránky.

Úplne najjednoduchší list group vytvoríme pomocou zoznamu <ul>:

<ul class="list-group">
    <li class="list-group-item active" aria-current="true">Events</li>
    <li class="list-group-item">News</li>
    <li class="list-group-item">Articles</li>
    <li class="list-group-item disabled" aria-disabled="true">Auctions</li>
</ul>

Samotnému elementu <ul> priraďujeme triedu .list-group, jeho prvkom <li> potom triedu .list-group-item. Pokiaľ chceme niektorý prvok vykresliť ako vybraný, priraďujeme mu triedu .active. Niektoré prvky môžeme naopak vykresliť ako neaktívne a to pomocou triedy .disabled. Pridanie atribútov aria-current a aria-disabled je dôležité z hľadiska prístupnosti, čo je kľúčové pre užívateľov, ktorí sa spoliehajú na asistenčné technológie, ako sú čítačky obrazovky.

Výsledok v prehliadači:

Na disabled položky môže byť ako vždy možné teoreticky kliknúť pomocou klávesnice a preto by sme ich mali zneaktívniť napríklad JavaScriptom.

Odkazy a tlačidlá

Namiesto zoznamu <ul> môžeme použiť aj element <div> a do neho vkladať ako prvky napr. elementy <a> alebo <button>. Divu priradíme opäť triedu .list-group a jeho prvkom triedu .list-group-item. Prvkom navyše pridávame triedu .list-group-item-action, ktorá spôsobí hover efekt. Odkazom nepridávame triedu .btn:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Events</a>
    <a href="#" class="list-group-item list-group-item-action">News</a>
    <a href="#" class="list-group-item list-group-item-action">Articles</a>
    <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">Auctions</a>
</div>

Výsledok:

Pokiaľ by sme použili element <button>, môžeme prvky zneaktívniť pomocou atribútu disabled="disabled".

Farby

Na zafarbenie pozadia položiek môžeme využiť štandardné farby Bootstrapu, sú dostupné pod triedami:

• .list-group-item-primary - hlavná farba, ako predvolená modrá,
• .list-group-item-secondary - druhá hlavná farba, predvolená šedá,
• .list-group-item-success - zelená,
• .list-group-item-danger - červená,
• .list-group-item-warning - žltá,
• .list-group-item-info - neutrálna modrá,
• .list-group-item-light - svetlounca sivá,
• .list-group-item-dark - takmer čierna.

Pokiaľ pridáme aj triedu .list-group-item-action, budú mať položky hover efekt:

Aktívna položka má vždy farbu "primary", ako predvolenú modrú, bez ohľadu na farbu pozadia položky. Ako vždy by sme okrem priradenia farby pozadia mali vložiť aj nejaký <span> s triedou .visually-hidden, obsahujúci vysvetlenie zvýraznenia pre užívateľov s hlasovými čítačkami.

Odznaky

Do prvkov zoznamu nie je problém vložiť odznaky, ktoré sme prebrali v lekcii Bootstrap - Jumbotron a Badges. Ich zarovnanie nastavíme pomocou flex utilities a to pridaním tried .d-flex, .justify-content-between a .align-items-center. Viac o utilitách sa dozvieme ďalej v kurze v lekcii Bootstrap - Utilities:

Ďalší HTML obsah

Do list groups môžeme vložiť prakticky čokoľvek, nadpisy, odseky a ďalšie elementy:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">Modern webdesign A to Z</h5>
            <small class="text-muted">Jan 4th</small>
        </div>
        <p class="mb-1">
            A seminar focusing on webdesign and front-end technologies such as HTML 5, CSS 3, Bootstrap, SEO optimization for search engines, domains and webhosting, SASS and LESS and others.
        </p>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">Object-oriented programming</h5>
            <small class="text-muted">Jan 14th</small>
        </div>
        <p class="mb-1">
            An object-oriented programming seminar, focusing on classes, encapsulation, inheritance, polymorphism, abstraction, statics, interfaces, exceptions, collections, lambda functions and more.
        </p>
        <small class="text-danger">Last places.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">Testing and versioning</h5>
            <small class="text-muted">Jan 24th</small>
        </div>
        <p class="mb-1">
            This seminar is a job preparation for all of you who can program well but do not know the tools for testing, versioning, and teamwork.
        </p>
    </a>
</div>

Výsledok:

Taby

Pokiaľ do stránky pripojíme aj Bootstrap JavaScript, môžeme prvky zoznamu použiť ako záložky na prepínanie ďalšieho obsahu. HTML kód bude vyzerať takto:

<div class="row">
    <div class="col-4">
        <div class="list-group" role="tablist">
            <a class="list-group-item list-group-item-action active" id="list-events-list" data-bs-toggle="list" href="#list-events" role="tab" aria-controls="Events">Events</a>
            <a class="list-group-item list-group-item-action" id="list-news-list" data-bs-toggle="list" href="#list-news" role="tab" aria-controls="News">News</a>
            <a class="list-group-item list-group-item-action" id="list-articles-list" data-bs-toggle="list" href="#list-articles" role="tab" aria-controls="Articles">Articles</a>
            <a class="list-group-item list-group-item-action disabled" id="list-auctions-list" data-bs-toggle="list" href="#list-auctions" role="tab" aria-controls="Auctions">Auctions</a>
        </div>
    </div>
    <div class="col-8">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="list-events" role="tabpanel" aria-labelledby="list-events-list">Tab content for events</div>
            <div class="tab-pane fade" id="list-news" role="tabpanel" aria-labelledby="list-news-list">Tab content for news</div>
            <div class="tab-pane fade" id="list-articles" role="tabpanel" aria-labelledby="list-articles-list">Tab content for articles</div>
        </div>
    </div>
</div>

Tento príklad demonštruje, ako jednoducho môžeme použiť taby v Bootstrape 5. Výsledkom je funkčný systém tabov, ktorý je možné integrovať do webových stránok bez potreby ďalšieho JavaScriptu. Použijeme ho jednoducho tak, že ho skopírujeme a upravíme. Pre správnu funkčnosť je nutné dodržať všetky ID a prefixy/suffixy. Všimnime si triedy .fade a .show pre dosiahnutie animácie prechodu medzi taby.

Výsledok v prehliadači je:

Prepínanie pomocou JavaScriptu

Pokiaľ by sme niekedy potrebovali taby prepínať pomocou JavaScriptu, napríklad je cyklit po nejakom časovom intervale máme k tomu pripravenú metódu show() na zobrazenie karty a getInstance() na získanie inštancie karty:

const triggerEl = document.querySelector('#list-item-id')
bootstrap.Tab.getInstance(triggerEl).show()

Na taboch sa v JavaScripte volajú nasledujúce udalosti (ich poradie zodpovedá poradiu ich volania):

• hide.bs.tab - zavolá sa na práve aktívnej záložke, keď sa má zobraziť nová záložka,
• show.bs.tab - zavolá sa na záložke, ktorá sa má práve zobraziť, ale predtým, než je naozaj zobrazená,
• hidden.bs.tab - zavolá sa na záložke, ktorá bola predtým aktívna, už potom, čo došlo k prepnutiu,
• shown.bs.tab - zavolá sa na záložke, ktorá sa práve zobrazila.

Udalosti odchytíme napríklad takto:

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // tab that was previously active
  })
})

V nasledujúcom cvičení, Riešené úlohy k 11.-12. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.