Lekce 14 - Bootstrap - Carousely a Progress

V minulé lekci, Bootstrap - Karty, jsme se věnovali kartám.

V dnešním tutoriálu CSS frameworku Bootstrap pokryjeme dvě jeho komponenty - Carousely a Progress.

Carousely

Carousels, česky kolotoče, jsou komponenty, které slouží k přepínání obsahu. Pravděpodobně jste se s nimi již setkali, používáme je hojně i na síti ITnetwork. Někdy se těmto komponentám říká slidery, slideshow, cyclers a podobně. Asi nejširší využití je na prezentaci fotografií nebo screenshotů, kdy Carousel zabere místo jen na jeden obrázek a obrázky v něm se poté přepínají. Jak ale asi již tušíte, Bootstrap nám umožňuje vkládat do Carouselů libovolný HTML obsah.

Carousely typicky zobrazují šipky "zpět", resp. "vpřed" a indikátor snímku v dolní části. Snímky se mohou přepínat samy po nějakém časovém intervalu, což je výchozí chování, nebo mezi nimi můžeme nechat přepínat pouze uživatele. Pokud prohlížeč podporuje Page Visibility API, nebude se mezi snímky automaticky přepínat v době, kdy je prohlížeč neaktivní (např. minimalizovaný).

Ukázka

Ukažme si na jednom Carouselu vše co je do něj možné přidat. Jakékoli prvky z kódu poté můžete odstranit, pokud se vám nebudou hodit.

<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ýsledek v prohlížeči:

Carousel je element <div> se třídou .carousel. Pokud chceme mít přechod snímků animovaný, dodáváme i třídu .slide. Všimněte si, že carousel má unikátní atribut id, ten je důležitý kvůli JavaScriptu. Ve stránce potřebujeme mít načtený také bootstrapový JavaScript, aby carousel fungoval korektně.

Indikátory

Pokud chceme mít v dolní části snímků zobrazené jejich indikátory, přidáme je jako seznam <ol> se třídou .carousel-indicators. Jednotlivým elementům <li> poté přidáváme data atributy data-target se selektorem carouselu a data-slide-to s číslem snímku. Snímky číslujeme od 0. Indikátoru aktivního snímku přidáváme třídu .active. Obsah elementů je prázdný.

Snímky

Všechny snímky obaluje element <div> se třídou .carousel-inner. Jednotlivé snímky poté přidáváme jako divy se třídou .carousel-item. Snímky mohou obsahovat libovolný HTML kód, v našem případě obsahují elementy <img>. Protože carousel ve výchozím nastavení svůj HTML obsah nijak neupravuje, obvykle přidáváme obrázkům třídu .w-100, aby byly stejně velké jako carousel. V oficiální dokumentaci přidávají obrázkům i třídu .d-block, která jim nastaví blokové vykreslování, ale carousel funguje i bez ní.

Popisky

Pokud chceme, můžeme ke každému snímku vložit nadpis a popisek. Ty vkládáme jako divy do HTML obsahu snímku. Přiřazujeme jim třídy .carousel-caption, .d-none a .d-md-block. Třída .d-none popisky skryje a třída .d-md-block je zobrazí pouze na středních a větších zařízeních. Na mobilních telefonech by totiž popisky nepříjemně překrývaly samotné snímky. Dovnitř divu vkládáme zpravidla nadpis <h3> a odstavec <p>.

Tlačítka

Šipky přepínající na "Předchozí" a "Další" snímek vkládáme jako odkazy se třídou .carousel-control-prev, resp. .carousel-control-next. V atributu href uvádíme selektor carouselu. Na jaký snímek má odkaz přepnout určíme pomocí atributu data-slide, kam vkládáme hodnotu prev, resp. next. Do odkazu obalíme <span> se třídou .carousel-control-prev-icon, resp. .carousel-control-next-icon, která způsobí vložení ikony. Ideálně bychom měli přidat i elementy se třídami pro hlasové čtečky a popisem tlačítek.

Přizpůsobení

Jak již bylo řečeno, jakoukoli část carouselu můžete odebrat a tak ponechat např. jen samotné snímky bez dalších ovládacích prvků nebo popisků. Carousely jsou vysoce uzpůsobitelné komponenty a dalšího přizpůsobení docílíme pomocí data atributů nebo pomocí JavaScriptu.

Data atributy

Některé data atributy jsme si již vysvětlili. Za zmínku určitě dále stojí atributy na samotném divu reprezentujícím carousel.

• data-ride - Pokud v něm uvedeme hodnotu carousel, rozpohybuje se carousel hned po načtení stránky. Výchozí hodnota je false.
• data-interval - Čas v milisekundách do přechodu k dalšímu snímku. Pokud zadáme hodnotu false, nebudou se snímky automaticky cyklit. Výchozí hodnota je 5000, která odpovídá 5 sekundám.
• data-keyboard - Zda lze přepínat snímky klávesnicí. Výchozí hodnota je true.
• data-pause - Výchozí hodnota atributu je hover, což způsobí pozastavení cyklení ve chvíli, když na snímek najedeme kurzorem myši nebo se ho uživatel dotýká na zařízení s dotykovou obrazovkou. Ono by bylo nepříjemné, kdyby se snímek při čtení uživateli najednou přepl. V případě dotykových zařízení dojde při dotyku k pauze o délce 2 intervalů. Pokud bychom přeci jen chtěli přepínat snímky nepřetržitě, uvedeme hodnotu false.
• data-wrap - Udává, zda se má po dosažení posledního snímku přepnout zpět na první nebo se má carousel zastavit. Výchozí hodnota je true.

JavaScript

Pokud z nějakého důvodu preferujete JavaScript před data atributy nebo potřebujete rozšířenou kontrolu, můžete celý carousel ovládat přes JavaScript jako jQuery plugin. Tento přístup nekombinujeme s data atributy. Výše uvedené data atributy na komponentě nalezneme i jako javascriptové vlastnosti (již bez prefixu data-).

Carousel můžeme inicializovat např. takto:

$('.carousel').carousel({
    interval: 2000
})

Metody

Metodě .carousel() můžeme předat jeden z následujících parametrů:

• "cycle" - Cyklí prvky zleva doprava
• "pause" - Pozastaví cyklení
• číslo - Přejde na snímek s daným indexem, předá řízení ještě než dojde k přepnutí
• "prev" - Přejde na předchozí snímek, předá řízení ještě než dojde k přepnutí
• "next" - Přejde na další snímek, předá řízení ještě než dojde k přepnutí
• "dispose" - Odstraní carousel

Pokud zavoláme metodu ve chvíli animace, bude volání ignorováno. Všechna volání jsou asynchronní.

Události

Pokud byste chtěli reagovat na javascriptové události, máte k dispozici následující 2:

• slide.bs.carousel - Zavolá se po zavolání instanční metody
• slid.bs.carousel - Zavolá se po dokončení animace

Události mají následující vlastnosti:

• direction - Směr cyklení (hodnoty "left" nebo "right")
• relatedTarget - Element, který se stává aktivním snímkem
• from - Index aktuálního snímku
• to - Index budoucího snímku

Reakce na událost by mohla vypadat jako:

$('#ukazka-carousel').on('slide.bs.carousel', function () {
    // nějaká reakce...
})

Progress

Pokud se uživatel nachází v nějakém procesu, je vhodné mu zobrazit grafický indikátor, známý spíše jako progressbar. Facebook tyto indikátory využívá např. pro signalizaci jak dobře máme vyplněný profil a kolik osobních údajů nám zbývá této síti ještě vyplnit Framework Bootstrap kupodivu progressbary neřeší stylováním elementu <progress>, je to pravděpodobně z důvodu ještě nedostatečné podpory pro vlastní stylování. Progressbary vytváříme z elementů <div>, kterým přiřadíme třídu .progress-bar. Je nutné nastavit také velikost (hodnotu, kolik má být na indikátoru vyplněno), k čemuž můžeme využít utility tříd, např. třídy w-50 pro 50%.

Následuje kód pro vložení 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žit i text, typicky kolik % je hotovo. Pokud bychom chtěli nastavit barvu, použijeme nám již známe utility pro barvy pozadí s prefixy "bg-". Všechny utility třídy si popíšeme dále v online kurzu.

<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šimněte si atributů "aria" s doplňujícími informacemi pro hlasové čtečky.

Výsledek:

Pokud byste potřebovali progressbaru nastavit jinou výšku, stačí ji nastavit vnějšímu elementu se třídou .progress, vnitřní element se přizpůsobí automaticky.

Skládání

Pokud byste to z nějakého důvodu využili, můžete do progressu vložit několik progressbarů, budou se skládat za sebe. Teoreticky se tím dá vytvořit nějaký jednoduchý graf:

Pruhy a animace

Když ke kterémukoli progressbaru přidáme třídu .progress-bar-striped, vykreslí se přes něj pruhy. A díky těmto pruhům bude viditelná také animace, kterou můžeme přidat pomocí třídy .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ýsledek:

Animace dodává uživateli pocit, že se na procesu právě pracuje.

V následujícím cvičení, Řešené úlohy k 13.-14. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.