14. diel - Bootstrap - Carousel a Progress
V minulej lekcii, Bootstrap - Karty , sme sa venovali kartám. V dnešnom tutoriále CSS frameworku Bootstrap pokryjeme ďalšie 2 jeho komponenty - Carousel a Progress.
Carousel
Carousels, česky kolotoče, sú komponenty, ktoré slúžia na prepínanie obsahu. Pravdepodobne ste sa s nimi už stretli, používame je hojne aj na sieti ITnetwork. Niekedy sa týmto komponentom hovorí slidery, slideshow, Cyclers a podobne. Asi najširšie využitie je na prezentáciu fotografií alebo screenshotov, kedy Carousel zaberie miesto len na jeden obrázok a obrázky v ňom sa potom prepínajú. Ako ale asi už tušíte, Bootstrap nám umožňuje vkladať do Carousel ľubovoľný HTML obsah.
Carousel typicky zobrazujú šípky "späť", resp. "Vpred" a indikátor snímke v dolnej časti. Snímky sa môžu prepínať samy po nejakom časovom intervale, čo je predvolené správanie, alebo medzi nimi môžeme nechať prepínať iba používateľa. Ak prehliadač podporuje Page Visibility API, nebude sa medzi snímky automaticky prepínať v čase, keď je prehliadač neaktívne (napr. Minimalizovaný).
Ukážka
Ukážme si na jednom Carousel všetko čo je do neho možné pridať. Akékoľvek prvky z kódu potom môžete odstrániť, ak sa vám nebudú hodiť.
<div id="ukazka-carouselu" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#ukazka-carouselu" data-slide-to="0" class="active"></li> <li data-target="#ukazka-carouselu" data-slide-to="1"></li> <li data-target="#ukazka-carouselu" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_les.jpeg" alt="Les"> <div class="carousel-caption d-none d-md-block"> <h3>Les</h3> <p>Víte, že do lesa si můžete zajít odpočinou od informačních technologií? :) Dobrý je např. ten Klánovický hned u Prahy.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_poust.jpeg" alt="Poušť"> <div class="carousel-caption d-none d-md-block"> <h3>Poušť</h3> <p>Vítr vane pouští, po písku žene klobouk. Zahnal ho do houští, starý a černý klobouk.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_jezero.jpeg" alt="Jezero"> <div class="carousel-caption d-none d-md-block"> <h3>Jezero</h3> <p>Jezera se často vyskytovala v poezii, pravděpodobně pro pocity plynoucí z klidné hladiny rozlehlé vodní plochy.</p> </div> </div> </div> <a class="carousel-control-prev" href="#ukazka-carouselu" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Předchozí</span> </a> <a class="carousel-control-next" href="#ukazka-carouselu" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Další</span> </a> </div>
Výsledok v prehliadači:
Carousel je element <div>
sa triedou
.carousel
. Ak chceme mať prechod snímok animovaný, dodávame aj
triedu .slide
. Všimnite si, že carousel má unikátny atribút
id
, ten je dôležitý kvôli JavaScriptu. V stránke potrebujeme
mať načítaný tiež bootstrapový JavaScript, aby carousel pracoval
správne.
Indikátory
Ak chceme mať v dolnej časti snímok zobrazenej ich indikátory, pridáme
ich ako zoznam <ol>
sa triedou
.carousel-indicators
. Jednotlivým elementom
<li>
potom pridávame dáta atribúty
data-target
s voličom Carousel a data-slide-to
s
číslom snímky. Snímky číslujeme od 0. Indikátor aktívneho snímke
pridávame triedu .active
. Obsah elementov je prázdny.
Snímky
Všetky snímky obaľuje element <div>
sa triedou
.carousel-inner
. Jednotlivé snímky potom pridávame ako divy sa
triedou .carousel-item
. Snímky môžu obsahovať ľubovoľný HTML
kód, v našom prípade obsahujú elementy <img>
. Pretože
carousel v predvolenom nastavení svoj HTML obsah nijako neupravuje, zvyčajne
pridávame obrázkom triedu .w-100
, aby boli rovnako veľké ako
carousel. V oficiálnej dokumentácii pridávajú obrázkom i triedu
.d-block
, ktorá im nastaví blokové vykresľovanie, ale carousel
funguje aj bez nej.
Popisky
Ak chceme, môžeme ku každému snímku vložiť nadpis a popis. Tie
vkladáme ako divy do HTML obsahu snímky. Priraďujeme im triedy
.carousel-caption
, .d-none
a .d-md-block
.
Trieda .d-none
popisky skryje a trieda .d-md-block
je
zobrazí len na stredných a väčších zariadeniach. Na mobilných telefónoch
by totiž menovkami nepríjemne prekrývali samotnej snímky. Dovnútra divu
vkladáme spravidla nadpis <h3>
a odstavec
<p>
.
Tlačidla
Šípky prepínajúci na "Predchádzajúce" a "Ďalšie" snímku vkladáme
ako odkazy sa triedou .carousel-control-prev
, resp.
.carousel-control-next
. V atribútu href
uvádzame
selektor Carousel. Na aký snímok má odkaz prepnúť určíme pomocou
atribútu data-slide
, kam vkladáme hodnotu prev
,
resp. next
. Do odkazu obalíme <span>
sa triedou
.carousel-control-prev-icon
, resp.
.carousel-control-next-icon
, ktorá spôsobí vloženie ikony.
Ideálne by sme mali pridať aj elementy sa triedami pre hlasové čítačky a
popisom tlačidiel.
Prispôsobenie
Ako už bolo povedané, akúkoľvek časť Carousel môžete odobrať a tak ponechať napr. Len samotné zábery bez ďalších ovládacích prvkov alebo popiskov. Carousel sú vysoko prispôsobiteľný komponenty a ďalšieho prispôsobenia docielime pomocou dáta atribútov alebo pomocou JavaScriptu.
Dáta atribúty
Niektoré dáta atribúty sme si už vysvetlili. Za zmienku určite ďalej stojí atribúty na samotnom divu reprezentujúcim carousel.
data-ride
- Ak v ňom uvedieme hodnotucarousel
, rozhýbe sa carousel hneď po načítaní stránky. Predvolená hodnota jefalse
.data-interval
- Čas v milisekundách do prechodu k ďalšiemu snímke. Pokiaľ zadáme hodnotufalse
, nebudú sa snímky automaticky cyklit. Predvolená hodnota je5000
, ktorá zodpovedá 5 sekundám.data-keyboard
- Či možno prepínať snímky klávesnicou. Predvolená hodnota jetrue
.data-pause
- Predvolená hodnota atribútu jehover
, čo spôsobí pozastavenie cyklení vo chvíli, keď na snímku prejdeme kurzorom myši alebo sa ho používateľ dotýka na zariadení s dotykovou obrazovkou. Ono by bolo nepríjemné, keby sa snímka pri čítaní užívateľovi naraz prepli. V prípade dotykových zariadení dôjde pri dotyku k pauze s dĺžkou 2 intervalov. Ak by sme predsa len chceli prepínať snímky nepretržite, uvedieme hodnotufalse
.data-wrap
- určuje, či sa má po dosiahnutí poslednej snímky prepnúť späť na prvú alebo sa má carousel zastaviť. Predvolená hodnota jetrue
.
Javascript
Ak z nejakého dôvodu preferujete JavaScript pred dáta atribúty alebo
potrebujete rozšírenú kontrolu, môžete celý carousel ovládať cez
JavaScript ako jQuery plugin. Tento prístup nekombinujeme s dáta atribúty.
Vyššie uvedené dáta atribúty na komponente nájdeme aj ako javascriptové
vlastnosti (už bez prefixu data-
).
Carousel môžeme inicializovať napr. Nasledovne:
$('.carousel').carousel({ interval: 2000 })
Metódy
Metóde .carousel()
môžeme odovzdať jeden z nasledujúcich
parametrov:
"cycle"
- CYKLO prvky zľava doprava"pause"
- Pozastaví cykleníčíslo
- Prejde na snímku s daným indexom, odovzdá riadenie ešte než dôjde k prepnutiu"prev"
- Prejde na predchádzajúcu snímku, odovzdá riadenie ešte než dôjde k prepnutiu"next"
- Prejde na ďalšiu snímku, odovzdá riadenie ešte než dôjde k prepnutiu"dispose"
- Odstráni carousel
Udalosti
Ak by ste chceli reagovať na javascriptové udalosti, máte k dispozícii nasledujúce 2:
slide.bs.carousel
- Zavolá sa po zavolaní inštančné metódyslid.bs.carousel
- Zavolá sa po dokončení animácia
Udalosti majú tieto vlastnosti:
direction
- Smer cyklení (hodnoty"left"
alebo"right"
)relatedTarget
- Element, ktorý sa stáva aktívnym snímkoufrom
- Index aktuálnej snímkyto
- Index budúceho snímky
$('#ukazka-carousel').on('slide.bs.carousel', function () { // nějaká reakce... })
Progress
Ak sa používateľ nachádza v nejakom procese, je vhodné mu zobraziť
grafický indikátor, známy skôr ako progressbar. Facebook tieto indikátory
využíva napr. Pre signalizáciu ako dobre máme vyplnený profil a koľko
osobných údajov nám zostáva tejto sieti ešte vyplniť Framework Bootstrap napodiv
progressbar nerieši stylovaním elementu <progress>
, je to
pravdepodobne z dôvodu ešte nedostatočnej podpory pre vlastné štýlovanie.
Progressbar vytvárame z elementov <div>
, ktorým priradíme
triedu .progress-bar
. Je nutné nastaviť tiež veľkosť (hodnotu,
koľko má byť na indikátore vyplnené), k čomu môžeme využiť utility
tried, napr. Triedy w-50
pre 50%.
Nasleduje kód pre vloženie jednoduchého lište s hodnotou 50%:
<div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div>
Do divu môžeme vložiť aj text, typicky koľko% je hotovo. Ak by sme chceli nastaviť farbu, použijeme nám už poznáme utility pre farby pozadia s prefixy "bg-". Všetky utility triedy si popíšeme ďalej v online kurze.
<div class="progress"> <div class="progress-bar w-75 bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> </div>
Všimnite si atribútov "aria" s doplňujúcimi informáciami pre hlasové čítačky.
výsledok:
Ak by ste potrebovali lište nastaviť inú výšku, stačí ju nastaviť
vonkajšiemu elementu sa triedou .progress
, vnútorný element sa
prispôsobí automaticky.
Skladanie
Ak by ste to z nejakého dôvodu využili, môžete do Progress vložiť niekoľko progressbar, budú sa skladať za seba. Teoreticky sa tým dá vytvoriť nejaký jednoduchý graf:
Pruhy a animácie
Keď ku ktorémukoľvek lište pridáme triedu
.progress-bar-striped
, vykreslí sa cez neho pruhmi. A vďaka
týmto pruhom bude viditeľná aj animácie, ktorú môžeme pridať pomocou
triedy .progress-bar-animated
.
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Absolvováno 50% Bootstrap kurzu</div> </div>
výsledok:
Animácia dodáva užívateľovi pocit, že sa na procese práve pracuje.
V budúcej lekcii, Riešené úlohy k 13.-14. lekciu Bootstrap CSS frameworku , si ukážeme univerzálne komponent Collapse a jej modifikáciu Accordion.
V nasledujúcom cvičení, Riešené úlohy k 13.-14. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.