Lekce 12 - Bootstrap - List groups

V minulé lekci, Bootstrap - Jumbotron a Badges, jsme se zabývali základní kostrou webu a badges.

V dnešním Bootstrap tutoriálu se zaměříme na seznamy. Ukážeme si, jak se používají s odkazy, tlačítky, odznaky a taby.

List groups v Bootstrapu

List groups, česky bychom řekli seznamové skupiny, jsou seznamy, do kterých můžeme vložit v podstatě kterýkoli odkaz. Vykreslují se svisle a obvykle se využívají v kombinaci s grid systémem, kdy pomocí nich zobrazíme seznam položek jako jeden ze sloupců layoutu stránky.

Úplně nejjednodušší list group vytvoříme pomocí seznamu <ul> :

<ul class="list-group">
    <li class="list-group-item active" aria-current="true">Události</li>
    <li class="list-group-item">Zprávy</li>
    <li class="list-group-item">Články</li>
    <li class="list-group-item disabled" aria-disabled="true">Aukce</li>
</ul>

Samotnému elementu <ul> přiřazujeme třídu .list-group, jeho prvkům <li> poté třídu .list-group-item. Pokud chceme některý prvek vykreslit jako vybraný, přiřazujeme mu třídu .active. Některé prvky můžeme naopak vykreslit jako neaktivní a to pomocí třídy .disabled. Přidání atributů aria-current a aria-disabled je důležité z hlediska přístupnosti, což je klíčové pro uživatele, kteří se spoléhají na asistenční technologie, jako jsou čtečky obrazovky.

Výsledek v prohlížeči:

Na disabled položky může být jako vždy možné teoreticky kliknout pomocí klávesnice a proto bychom je měli zneaktivnit např. JavaScriptem.

Odkazy a tlačítka

Místo seznamu <ul> můžeme použít i element <div> a do něj vkládat jako prvky např. elementy <a> nebo <button>. Divu přiřadíme opět třídu .list-group a jeho prvkům třídu .list-group-item. Prvkům navíc přidáváme třídu .list-group-item-action, která způsobí hover efekt. Odkazům nepřidáváme třídu .btn:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Události</a>
    <a href="#" class="list-group-item list-group-item-action">Zprávy</a>
    <a href="#" class="list-group-item list-group-item-action">Články</a>
    <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">Aukce</a>
</div>

Výsledek:

Pokud bychom použili element <button>, můžeme prvky zneaktivnit pomocí atributu disabled="disabled".

Barvy

Pro obarvení pozadí položek můžeme využít standardních barev Bootstrapu, jsou dostupné pod třídami:

• .list-group-item-primary - hlavní barva, jako výchozí modrá,
• .list-group-item-secondary - druhá hlavní barva, výchozí šedá,
• .list-group-item-success - zelená,
• .list-group-item-danger - červená,
• .list-group-item-warning - žlutá,
• .list-group-item-info - neutrální modrá,
• .list-group-item-light - světlounce šedá,
• .list-group-item-dark - téměř černá.

Pokud přidáme i třídu .list-group-item-action, budou mít položky hover efekt:

Aktivní položka má vždy barvu "primary", jako výchozí modrou, bez ohledu na barvu pozadí položky. Jako vždy bychom kromě přiřazení barvy pozadí měli vložit i nějaký <span> s třídou .visually-hidden, obsahující vysvětlení zvýraznění pro uživatele s hlasovými čtečkami.

Odznaky

Do prvků seznamu není problém vložit odznaky, které jsme probrali v lekci Bootstrap - Jumbotron a Badges. Jejich zarovnání nastavíme pomocí flex utilities a to přidáním tříd .d-flex, .justify-content-between a .align-items-center. Více o utilitách se dozvíme dále v kurzu v lekci Bootstrap - Utilities:

Další HTML obsah

Do list groups můžeme vložit prakticky cokoli, nadpisy, odstavce a další 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 od A do Z</h5>
            <small class="text-muted">4. ledna</small>
        </div>
        <p class="mb-1">
            Školení webdesignu a front-endových technologií HTML 5, CSS 3, bootstrap, SEO optimalizace pro vyhledávače, domény a webhostingy, SASS a LESS a dalších.
        </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">Objektové programování</h5>
            <small class="text-muted">14. ledna</small>
        </div>
        <p class="mb-1">
            Školení objektově orientovaného programování, kurz se zaměřuje zejména na třídy, zapouzdření, dědičnost, polymorfismus, abstrakci, statiku, rozhraní, výjimky, kolekce, lambda funkce a další.
        </p>
        <small class="text-danger">Poslední místa.</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">Testování a verzování</h5>
            <small class="text-muted">24. ledna</small>
        </div>
        <p class="mb-1">
            Školení slouží jako příprava do zaměstnání pro všechny, kteří umí již dobře programovat, ale neovládají nástroje pro testování, verzování a práci v týmu.
        </p>
    </a>
</div>

Výsledek:

Taby

Pokud do stránky připojíme i Bootstrap JavaScript, můžeme prvky seznamu použít jako záložky pro přepínání dalšího obsahu. HTML kód bude vypadat 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-udalosti-list" data-bs-toggle="list" href="#list-udalosti" role="tab" aria-controls="Události">Události</a>
            <a class="list-group-item list-group-item-action" id="list-zpravy-list" data-bs-toggle="list" href="#list-zpravy" role="tab" aria-controls="Zprávy">Zprávy</a>
            <a class="list-group-item list-group-item-action" id="list-clanky-list" data-bs-toggle="list" href="#list-clanky" role="tab" aria-controls="Články">Články</a>
            <a class="list-group-item list-group-item-action disabled" id="list-aukce-list" data-bs-toggle="list" href="#list-aukce" role="tab" aria-controls="Aukce">Aukce</a>
        </div>
    </div>
    <div class="col-8">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="list-udalosti" role="tabpanel" aria-labelledby="list-udalosti-list">Obsah záložky pro události</div>
            <div class="tab-pane fade" id="list-zpravy" role="tabpanel" aria-labelledby="list-zpravy-list">Obsah záložky pro zprávy</div>
            <div class="tab-pane fade" id="list-clanky" role="tabpanel" aria-labelledby="list-clanky-list">Obsah záložky pro články</div>
        </div>
    </div>
</div>

Tento příklad demonstruje, jak jednoduše můžeme použít taby v Bootstrapu 5. Výsledkem je funkční systém tabů, který lze integrovat do webových stránek bez potřeby dalšího JavaScriptu. Použijeme jej jednoduše tak, že jej zkopírujeme a upravíme. Pro správnou funkčnost je nutné dodržet všechna ID a prefixy/suffixy. Všimněme si tříd .fade a .show pro dosažení animace přechodu mezi taby.

Výsledek v prohlížeči je:

Přepínání pomocí JavaScriptu

Pokud bychom někdy potřebovali taby přepínat pomocí JavaScriptu, například je cyklit po nějakém časovém intervalu, máme k tomu připravenou metodu tab():

const triggerEl = document.querySelector('#id-prvku-v-seznamu')
bootstrap.Tab.getInstance(triggerEl).show()

Na tabech se v JavaScriptu volají následující události (jejich pořadí odpovídá pořadí jejich volání):

• hide.bs.tab - zavolá se na zrovna aktivní záložce, když se má zobrazit nová záložka,
• show.bs.tab - zavolá se na záložce, která se má zrovna zobrazit, ale předtím, než je opravdu zobrazena,
• hidden.bs.tab - zavolá se na záložce, která byla dříve aktivní, již poté, co došlo k přepnutí,
• shown.bs.tab - zavolá se na záložce, která se zrovna zobrazila.

Události odchytíme například takto:

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // nově aktivovaný tab
    event.relatedTarget // tab, který byl dříve aktivní
  })
})

V následujícím cvičení, Řešené úlohy k 11.-12. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.