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 hodnotu carousel, rozhýbe sa carousel hneď po načítaní stránky. Predvolená hodnota je false.
• data-interval - Čas v milisekundách do prechodu k ďalšiemu snímke. Pokiaľ zadáme hodnotu false, nebudú sa snímky automaticky cyklit. Predvolená hodnota je 5000, ktorá zodpovedá 5 sekundám.
• data-keyboard - Či možno prepínať snímky klávesnicou. Predvolená hodnota je true.
• data-pause - Predvolená hodnota atribútu je hover, č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 hodnotu false.
• data-wrap - určuje, či sa má po dosiahnutí poslednej snímky prepnúť späť na prvú alebo sa má carousel zastaviť. Predvolená hodnota je true.

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

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

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ódy
• slid.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ímkou
• from - Index aktuálnej snímky
• to - Index budúceho snímky

Reakcia na udalosť by mohla vyzerať ako:

$('#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í.