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 probereme dvě jeho komponenty – carousel a progress.

Carousely v Bootstrapu

Carousely, č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častěji se carousely využívají k prezentaci fotografií nebo screenshotů, kdy carousel zabere pouze místo jednoho obrázku a další snímky se v něm poté přepínají. Jak ale asi tušíte, 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 carousel 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é vložit. 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í. Tuto třídu musíme přidat vždy, jinak se carousel nebude zobrazovat správně.

Pro správné fungování musíme kromě Bootstrap stylů nalinkovat v <head> i JavaScript:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Výsledek v prohlížeči:

Carousel v Bootstrapu

carousel.html

Carousel je element <div> s 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 tehdy, 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> s 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> s třídou .carousel-inner. Jednotlivé snímky poté přidáváme jako prvky <div> s třídou .carousel-item. Snímky mohou obsahovat libovolný HTML kód, v našem případě to jsou 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 elementy <div> 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ř elementu <div> 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 s třídou .carousel-control-prev, respektive .carousel-control-next. Atribut data-bs-target uvádí selektor carouselu. Na který 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> s 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 s třídami pro hlasové čtečky a s popisem tlačítek.

Přizpůsobení

Jak již bylo zmíněno, z carouselu můžeme odebrat jeho libovolnou část – lze tak ponechat například jen samotné snímky bez dalších ovládacích prvků nebo popisků. Carousely jsou vysoce přizpůsobitelné komponenty a jejich chování lze dále upravit pomocí data atributů nebo JavaScriptu.

Data atributy

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

data-bs-interval – Udává č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í hodnotou je 5000, což odpovídá 5 sekundám.
data-bs-keyboard – Nastavuje, zda lze přepínat snímky klávesnicí. Výchozí hodnotou je true.
data-bs-pause – Výchozí hodnotou 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. Bylo by totiž nepříjemné, kdyby se snímek při čtení uživateli najednou přepnul. V případě dotykových zařízení dojde při dotyku k pauze o délce dvou intervalů. Pokud bychom přece jen chtěli přepínat snímky nepřetržitě, uvedeme hodnotu false.
data-bs-wrap – Udává, zda se má carousel po dosažení posledního snímku přepnout zpět na první, nebo se má zastavit. Výchozí hodnotou 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í dříve, než dojde k přepnutí.
prev() – Přejde na předchozí snímek, předá řízení dříve, než dojde k přepnutí.
next() – Přejde na další snímek, předá řízení dříve, 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í dvě:

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-carouselu');
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 progress bar. Framework Bootstrap kupodivu progress bary neřeší stylováním elementu <progress>, což je pravděpodobně způsobeno ještě nedostatečnou podporou pro vlastní stylování. Progress bary vytváříme z elementů <div>, kterým přiřadíme třídu .progress-bar. Je nutné nastavit také velikost, tedy hodnotu udávající, jak velká část indikátoru (progress baru) má být vyplněna. K tomu můžeme využít utility třídy, např. w-50 pro 50 %.

Následuje kód pro vložení jednoduchého progress baru 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 elementu <div> můžeme vložit i text, typicky údaj o tom, kolik procent je hotovo. Pokud bychom chtěli nastavit barvu, použijeme nám již známé 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:

Progress bary v Bootstrapu

progressbary.html

Pokud bychom potřebovali progress baru upravit výšku, stačí ji nastavit vnějšímu elementu s 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 progress barů, které se budou skládat za sebe. Teoreticky se tak 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:

Progress bary v Bootstrapu

progressbary_vice_baru.html

Pruhy a animace

Když ke kterémukoli progress baru přidáme třídu .progress-bar-striped, vykreslí se přes něj pruhy. 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:

Progress bary v Bootstrapu

progressbary_animace.html

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

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

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

992 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné

Lekce 14 - Bootstrap - Carousely a progress

Carousely v Bootstrapu

Ukázka carouselu

Indikátory

Snímky

Popisky

Tlačítka

Přizpůsobení

Data atributy

Metody

Události

Progress

Skládání

Pruhy a animace