14. diel - Bootstrap - Carousely a Progress

V minulej lekcii, Bootstrap - Karty, sme sa venovali kartám.

V dnešnom tutoriáli CSS frameworku Bootstrap si preberieme jeho dve komponenty - Carousely a Progress.

Carousely v Bootstrape

Carousels, po slovensky kolotoče, sú komponenty, ktoré slúžia na prepínanie obsahu. Pravdepodobne ste sa s nimi už stretli, používame ich značne 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 jedného obrázku a obrázky v ňom sa potom prepínajú. Ako ale už tušíme, Bootstrap nám umožňuje vkladať do Carouselov ľubovoľný HTML obsah.

Carousely typicky zobrazujú šípky Previous, respektíve Next a indikátor snímky v dolnej časti. Snímky sa môžu prepínať samy po nejakom časovom intervale, čo je východiskové správanie, alebo medzi nimi môžeme nechať prepínať iba používateľov. Ak prehliadač podporuje Page Visibility API, nebude sa medzi snímkami automaticky prepínať v čase, keď je prehliadač neaktívny (napríklad minimalizovaný).

Ukážka carouselu

Ukážme si na jednom Carouseli všetko, čo je do neho možné pridať. Akékoľvek prvky z kódu potom môžeme odstrániť, ak sa nám nebudú hodiť:

<div id="example-carousel" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-indicators">
      <button type="button" data-bs-target="#example-carousel" data-bs-slide-to="0" class="active"></button>
      <button type="button" data-bs-target="#example-carousel" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#example-carousel" data-bs-slide-to="2"></button>
   </div>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img src="images/forest_background.jpeg" class="d-block w-100" alt="Forest">
         <div class="carousel-caption d-none d-md-block">
            <h5>Forest</h5>
            <p>Did you know that you can take a break from information technology in the forest? Bear Mountain State Park is very pretty.</p>
         </div>
      </div>
      <div class="carousel-item">
         <img src="images/desert_background.jpeg" class="d-block w-100" alt="Desert">
         <div class="carousel-caption d-none d-md-block">
            <h5>Desert</h5>
            <p>Wind in desert ambushes, in sand hunting a hat. Made it hide in bushes, the tattered black hat.</p>
         </div>
      </div>
      <div class="carousel-item">
         <img src="images/lake_background.jpeg" class="d-block w-100" alt="Lake">
         <div class="carousel-caption d-none d-md-block">
            <h5>Lake</h5>
            <p>Lakes are very common in poetry, probably for the feelings based upon the calm large surface of the water.</p>
         </div>
      </div>
   </div>
   <button class="carousel-control-prev" type="button" data-bs-target="#example-carousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
   </button>
   <button class="carousel-control-next" type="button" data-bs-target="#example-carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
   </button>
</div>

Trieda .active určuje, ktorá snímka carouselu sa má zobraziť ako prvá. Triedu pridať musíme vždy, inak sa carousel nebude zobrazovať správne.

Výsledok v prehliadači:

Carousel in Bootstrap

carousel.html

Carousel je element <div> s triedou .carousel. Pokiaľ chceme mať prechod snímok animovaný, pridávame aj triedu .slide. Všimnime si, že carousel má unikátny atribút id, ktorý je dôležitý napríklad ak máme na stránke viac carouselov.

Indikátory

Ak chceme mať v dolnej časti snímok zobrazené ich indikátory, pridáme ich ako <div> s triedou .carousel-indicators. Jednotlivým elementom <button> potom pridávame data atribúty data-bs-target so selektorom carouselu a data-bs-slide-to s číslom snímky. Snímky číslujeme od nuly. Indikátoru aktívnej snímky pridávame triedu .active. Obsah elementov je prázdny.

Snímky

Všetky snímky obaľuje element <div> s triedou .carousel-inner. Jednotlivé snímky potom pridávame ako divy s 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, obvykle pridávame obrázkom triedu .w-100, aby boli rovnako veľké ako carousel. V oficiálnej dokumentácii pridávajú obrázkom aj triedu .d-block, ktorá im nastaví blokové vykresľovanie, ale carousel funguje aj bez nej.

Popisy

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 popisy skryje a trieda .d-md-block ich zobrazí iba na stredných a väčších zariadeniach. Na mobilných telefónoch by totiž popisy nepríjemne prekrývali samotné snímky. Dovnútra divu vkladáme spravidla nadpis <h5> a odsek <p>.

Tlačidlá

Šípky Previous a Next vkladáme ako tlačidlá s triedou .carousel-control-prev, respektíve .carousel-control-next. Atribút data-bs-target uvádza selektor carouselu. Na akú snímku má odkaz prepnúť určíme pomocou atribútu data-bs-slide, kam vkladáme hodnotu prev, respektíve next. Do odkazu obalíme <span> s triedou .carousel-control-prev-icon, respektíve .carousel-control-next-icon, ktorá spôsobí vloženie ikony. Ideálne by sme mali pridať aj elementy s triedami pre hlasové čítačky a popisom tlačidiel.

Prispôsobenie

Ako už bolo povedané, akúkoľvek časť carouselu môžeme odobrať a ponechať tak napríklad len samotné snímky bez ďalších ovládacích prvkov alebo popisov. Carousely sú vysoko prispôsobiteľné komponenty a ďalšie prispôsobenie docielime pomocou data atribútov alebo JavaScriptu.

Data atribúty

Niektoré data atribúty sme si už vysvetlili. Za zmienku určite ďalej stoja atribúty na samotnom dive reprezentujúcom carousel:

data-bs-interval - čas v milisekundách do prechodu na ďalší snímok. Ak zadáme hodnotu false, snímky sa nebudú automaticky cykliť. Predvolená hodnota je 5000, ktorá zodpovedá 5 sekundám,
data-bs-keyboard - či je možné prepínať snímky klávesnicou. Predvolená hodnota je true,
data-bs-pause - predvolená hodnota atribútu je hover, čo spôsobí pozastavenie cyklovania vo chvíli, keď na snímku prejdeme kurzorom myši alebo sa ho užívateľ dotýka na zariadení s dotykovou obrazovkou. Bolo by nepríjemné, keby sa snímka pri čítaní užívateľovi naraz prepla. 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 hodnotu false,
data-bs-wrap - udáva, či sa má po dosiahnutí poslednej snímky prepnúť späť na prvú alebo sa má carousel zastaviť. Predvolená hodnota je true.

Metódy

Na inštancii carouselu je možné z JavaScriptu volať tieto metódy::

cycle() - cyklí prvky zľava doprava,
pause() - pozastaví cyklovanie,
to(index) - prejde na snímku s daným indexom (počnúc 0), 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.

Ak zavoláme metódu vo chvíli animácie, bude volanie ignorované. Všetky volania sú asynchrónne.

Udalosti

Ak by sme chceli reagovať na javascriptové udalosti, k dispozícii máme nasledujúce dve:

slide.bs.carousel - zavolá sa po zavolaní inštančnej metódy,
slid.bs.carousel - zavolá sa po dokončení animácie.

Udalosti majú nasledujúce vlastnosti:

direction - smer cyklovania (hodnoty "left" alebo "right"),
relatedTarget - element, ktorý sa stáva aktívnou snímkou,
from - index aktuálnej snímky,
to - index budúcej snímky.

Reakcia na udalosť môže vyzerať ako:

const carouselElement = document.getElementById('#example-carousel');
carouselElement.addEventListener('slide.bs.carousel', event => {
    // some reaction...
})

Progress

Pokiaľ sa užívateľ nachádza v nejakom procese, je vhodné mu zobraziť grafický indikátor, známy skôr ako progressbar. Framework Bootstrap napodiv progressbary nerieši štýlovaním elementu <progress>, je to pravdepodobne z dôvodu ešte nedostatočnej podpory pre vlastné štýlovanie. Progressbary vytvárame z elementov <div>, ktorým priradíme triedu .progress-bar. Je nutné nastaviť aj veľkosť (hodnotu, koľko má byť na indikátore vyplnené), na čo môžeme využiť utility tried, napr. triedy w-50 pre 50 %.

Nasleduje kód na vloženie jednoduchého progressbaru 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 hotových. Ak by sme chceli nastaviť farbu, použijeme nám už známe utility pre farby pozadia z lekcie Bootstrap - Tabuľky s prefixmi bg-. Všetky utility triedy si popíšeme ďalej v 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šimnime si atribúty aria s doplňujúcimi informáciami pre hlasové čítačky.

Výsledok:

Progress Bars in Bootstrap

progress_bars.html

Pokiaľ by sme potrebovali progressbaru nastaviť inú výšku, stačí ju nastaviť vonkajšiemu elementu s triedou .progress, vnútorný element sa prispôsobí automaticky.

Skladanie

Ak by sme to z nejakého dôvodu využili, môžeme do progresu vložiť niekoľko progressbarov, budú sa skladať za seba. Teoreticky sa tak dá vytvoriť nejaký jednoduchý graf:

<div class="progress">
    <div class="progress-bar w-75 bg-primary" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75 % Men</div>
    <div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25 % Women</div>
</div>

Výsledok:

Progress Bars in Bootstrap

progress_bars_multiple.html

Pruhy a animácie

Ak ku ktorémukoľvek progressbaru pridáme triedu .progress-bar-striped, vykreslia sa cez neho pruhy. A vďaka týmto pruhom bude viditeľná aj animácia, 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">Completed 50 % of the Bootstrap course</div>
</div>