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">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>
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. 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">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ý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.
.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 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ý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-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 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 tab()
:
const triggerEl = document.querySelector('#id-prvku-v-seznamu') 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.
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]') tabElms.forEach(tabElm => { tabElm.addEventListener('shown.bs.tab', event => { event.target // novo aktivovaný tab event.relatedTarget // tab, ktorý bol predtým aktívny }) })
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í.