14. diel - Bootstrap - Carousely a Progress

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

V dnešnom tutoriáli CSS frameworku Bootstrap pokryjeme dve jeho 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 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ácii 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šíme, Bootstrap nám umožňuje vkladať do Carouselov ľubovoľný HTML obsah.

Carousely typicky zobrazujú šípky "späť", respektíve "vpred" 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ť, pokiaľ 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? The Klánovický forest near Prague is a good option.</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>The wind blows through the desert, pushing a hat over the sand. It chased it into the bushes, an old and 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 often appeared in poetry, probably because of the feelings evoked by the calm surface of the vast water area.</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 musíme vždy pridať, inak sa carousel nebude zobrazovať správne.

Výsledok v prehliadači:

Carousel je element <div> s triedou .carousel. Pokiaľ chceme mať prechod snímok animovaný, dodávame aj triedu .slide. Všimnime si, že carousel má unikátny atribút id, ten je dôležitý napríklad keď 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 dáta 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.

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

Tlačidlá

Šípky prepínajúce na "Predchádzajúci" a "Ďalší" snímku 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 dátumu atribútov alebo pomocou JavaScriptu.

Dáta atribúty

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

• data-bs-interval - čas v milisekundách do prechodu k ďalšiemu snímku. Ak zadáme hodnotu false, nebudú sa snímky automaticky cyklit. 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 cyklenia vo chvíli, keď na snímku prejdeme kurzorom myši alebo sa ho užívateľ dotýka na zariadení s dotykovou obrazovkou. Ono by bolo nepríjemné, keby sa snímka pri čítaní užívateľovi naraz prepl. 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

Metóde .carousel() môžeme odovzdať jeden z nasledujúcich parametrov:

• "cycle" - cyklie prvky zľava doprava,
• "pause" - pozastaví cyklenie,
• čí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á konanie 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, máme k dispozícii nasledujúce 2:

• 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 cyklenia (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 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šimnime si atribúty aria s doplňujúcimi informáciami pre hlasové čítačky.

Výsledok:

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 tým 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:

Pruhy a animácie

Keď 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>

Výsledok:

Animácia dodáva užívateľovi pocit, že sa na procese práve pracuje.

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í.