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 hodnotucarousel
, rozpohybuje se carousel hned po načtení stránky. Výchozí hodnota jefalse
.data-interval
- Čas v milisekundách do přechodu k dalšímu snímku. Pokud zadáme hodnotufalse
, nebudou se snímky automaticky cyklit. Výchozí hodnota je5000
, která odpovídá 5 sekundám.data-keyboard
- Zda lze přepínat snímky klávesnicí. Výchozí hodnota jetrue
.data-pause
- Výchozí hodnota atributu jehover
, 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 hodnotufalse
.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 jetrue
.
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í metodyslid.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ímkemfrom
- Index aktuálního snímkuto
- 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í.