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 v Bootstrapu

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šíme, Bootstrap nám umožňuje vkládat do Carouselů libovolný HTML obsah.

Carousely typicky zobrazují šipky "zpět", respektive "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říklad minimalizovaný).

Ukázka carouselu

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ůžeme odstranit, pokud se nám nebudou hodit:

<div id="ukazka-carouselu" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-indicators">
      <button type="button" data-bs-target="#ukazka-carouselu" data-bs-slide-to="0" class="active"></button>
      <button type="button" data-bs-target="#ukazka-carouselu" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#ukazka-carouselu" data-bs-slide-to="2"></button>
   </div>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_les.jpeg" class="d-block w-100"  alt="Les">
         <div class="carousel-caption d-none d-md-block">
            <h5>Les</h5>
            <p>Víte, že do lesa si můžete zajít odpočinou od informačních technologií? :) Dobrý je například ten Klánovický hned u Prahy.</p>
         </div>
      </div>
      <div class="carousel-item">
         <img src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_poust.jpeg" class="d-block w-100" alt="Poušť">
         <div class="carousel-caption d-none d-md-block">
            <h5>Poušť</h5>
            <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 src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_jezero.jpeg" class="d-block w-100" alt="Jezero">
         <div class="carousel-caption d-none d-md-block">
            <h5>Jezero</h5>
            <p>Jezera se často vyskytovala v poezii, pravděpodobně pro pocity plynoucí z klidné hladiny rozlehlé vodní plochy.</p>
         </div>
      </div>
   </div>
   <button class="carousel-control-prev" type="button" data-bs-target="#ukazka-carouselu" data-bs-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="visually-hidden">Předchozí</span>
   </button>
   <button class="carousel-control-next" type="button" data-bs-target="#ukazka-carouselu" data-bs-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="visually-hidden">Další</span>
   </button>
</div>

Třída .active určuje, který snímek carouselu se má zobrazit jako první. Třídu musíme vždy přidat, jinak se carousel nebude zobrazovat správně.

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ěme si, že carousel má unikátní atribut id, ten je důležitý například když máme na stránce více carouselů.

Indikátory

Pokud chceme mít v dolní části snímků zobrazené jejich indikátory, přidáme je jako <div> se třídou .carousel-indicators. Jednotlivým elementům <button> poté přidáváme data atributy data-bs-target se selektorem carouselu a data-bs-slide-to s číslem snímku. Snímky číslujeme od nuly. 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 <h5> a odstavec <p>.

Tlačítka

Šipky přepínající na "Předchozí" a "Další" snímek vkládáme jako tlačítka se třídou .carousel-control-prev, respektive .carousel-control-next. Atribut data-bs-target uvádí selektor carouselu. Na jaký snímek má odkaz přepnout určíme pomocí atributu data-bs-slide, kam vkládáme hodnotu prev, respektive next. Do odkazu obalíme <span> se třídou .carousel-control-prev-icon, respektive .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ůžeme odebrat a ponechat tak například jen samotné snímky bez dalších ovládacích prvků nebo popisků. Carousely jsou vysoce přizpů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-bs-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-bs-keyboard - zda lze přepínat snímky klávesnicí. Výchozí hodnota je true,
• data-bs-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-bs-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.

Metody

Na instanci carouselu je možné z JavaScriptu volat tyto metody:

• cycle() - cyklí prvky zleva doprava,
• pause() - pozastaví cyklení,
• to(index) - přejde na snímek s daným indexem (počínaje 0), 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 bychom chtěli reagovat na javascriptové události, máme 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 může vypadat jako:

const carouselElement = document.getElementById('#ukazka-carousel');
carouselElement.addEventListener('slide.bs.carousel', event => {
    // 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. 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í z lekce Bootstrap - Tabulky 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ěme si atributů aria s doplňujícími informacemi pro hlasové čtečky.

Výsledek:

Pokud bychom 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 bychom to z nějakého důvodu využili, můžeme do progressu vložit několik progressbarů, budou se skládat za sebe. Teoreticky se tím dá vytvořit nějaký 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 % muži</div>
    <div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25 % ženy</div>
</div>

Výsledek:

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