Progress bar

shadow

Progress Bar element je komponent navrhnutý na vizualizáciu priebehu. Ponúka možnosť vytvárať prispôsobiteľné kruhové alebo rovné ukazovatele s rôznymi možnosťami konfigurácie.

Základné použitie

Pre použitie komponentu Progress Bar, ho zahrňte do HTML s požadovanými atribútmi. Atribút progress nastaví percentuálnu hodnotu priebehu v progress bare.

Type

Podporované sú dva typy progress barov. Pridaním vlastnosti type s hodnotou “circle” zobrazíte progress bar s okrúhlym dizajnom.

Label

Pre zobrazenie popisiek pri progress bare je potrebné vložiť do jeho vnútra Label element a definovať mu pozíciu pridaním atribútu slot s hodnotou "start" alebo "end".

Linecap

Pridaním vlastnosti linecap s hodnotou “round” zobrazíte ukazovateľ priebehu so zaobleným koncom.

Radius

Atribút radius určí priemer okrúhleho progress baru.

Stroke

Atribút stroke definuje šírku progress baru v pixeloch.

Progress bar s obrázkom

Pre zobrazenie obrázku vo vnútri elementu, je potrebné obrázok zaobaliť do progress bar elementu.

Farebné varianty progress baru

Vlastnosť color upravuje farbu elementu. V predvolenom nastavení má element farbu dark. Nastavením tejto hodnoty sa farba elementu zmení na jednu z farieb prednastavenej farebnej palety.

Theming farieb

Aj pri menších kruhových variantoch môžete rovnaký progress prerenderovať v rôznych významových farbách podľa stavu procesu alebo výsledku.

Kedy použiť

Použite wje-progress-bar, keď potrebujete priebežne ukazovať postup úlohy, načítania alebo iného procesu v lineárnej alebo kruhovej forme.

Kedy nepoužiť

Nepoužívajte ho tam, kde používateľ potrebuje presnú textovú informáciu o stave bez vizuálneho indikátora. V takom prípade doplňte alebo uprednostnite textový status.

Prístupnosť

Komponent nastavuje rolu progressbar, preto má zmysel držať progress v rozsahu, ktorý zodpovedá reálnemu stavu, a pri dôležitých krokoch doplniť aj textový popis.

Odporúčané postupy

• Používajte rovnaký typ indikátora v rámci jedného flowu, aby sa používateľ nemusel prelaďovať medzi lineárnym a kruhovým variantom bez dôvodu.
• Ak je progres kľúčový pre rozhodovanie používateľa, doplňte ho textom alebo labelom v slotoch start a end.
• Farebné varianty používajte na význam, nie ako jediný nosič informácie.

Atribúty a vlastnosti

linecap

Popis	Nastavuje štýl zakončenia čiary indikátora progresu.
Atribút	linecap
Typ	string
Predvolené	square

progress

Popis	Nastavuje hodnotu progresu zobrazenú v indikátore.
Atribút	progress
Typ	number
Predvolené	-

radius

Popis	Nastavuje polomer používaný pri kruhovom variante progress baru.
Atribút	radius
Typ	number
Predvolené	70

stroke

Popis	Nastavuje hrúbku vykresleného indikátora progresu.
Atribút	stroke
Typ	number
Predvolené	6

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS tieňové časti

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS vlastné premenné

Názov	Popis
--wje-progress-bar-color	Vlastná CSS premenná, ktorá riadi color.
--wje-progress-bar-text-size	Vlastná CSS premenná na štýlovanie komponentu (text size).
--wje-progress-bar-text-color	Vlastná CSS premenná, ktorá riadi text color.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.